React之input动态取值和赋值方式
作者：周家大小姐.
这篇文章主要介绍了React之input动态取值和赋值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
react input动态取值和赋值
需求：对用户在form表单输入的值提取出来,并且改变setState中的数据
1.在constructor中设置初始值
2.在Input框中定义
如果只有value没有onChange事件会报错,change事件可以关联输入的值
value = {this.state.name}
onChange ={this.onChange.bind(this) }3.对onchange事件注册,然后获取Input值再对state赋值
e.target.name
代表你当前输入Input框对应的Name,如email,password
e.target.value
代表当前输入的值
this.setState({
[e.target.name] : e.target.value
})import React, { Component } from 'react'
class Register extends Component {
// 在构造函数当中设置状态
constructor(props){
super(props)
this.state ={
name : '',
email:'',
password:'',
password2:'',
errors:{},//用户不合法信息提示
}
}
onChange(e){
// console.log(e.currentTarget.value)
console.log(e.target.name)//(e.target.name代表你当前输入Input框对应的Name,如email,password
// e.target.value 代表当前输入的值
this.setState({
[e.target.name] : e.target.value
})
}
//提交对应的内容
onSubmit(e){
e.preventDefault()
const newUser = {
name : this.state.name,
email:this.state.email,
password:this.state.password,
password2:this.state.password2,
}
console.log(newUser)
}
render() {
return (
<div className="register">
{/* {user ? user.name : null} */}
<div className="container">
<div className="row">
<div className="col-md-8 m-auto">
<h1 className="display-4 text-center">注册</h1>
<p className="lead text-center">创建新的账户</p>
<form onSubmit={this.onSubmit.bind(this)}>
<div className="form-group">
<input
type="text"
className="form-control form-control-lg"
placeholder="用户名"
name="name"
value = {this.state.name}
onChange ={this.onChange.bind(this) }
/>
</div>
<div className="form-group">
<input
type="email"
className='form-control form-control-lg'
placeholder="邮箱地址"
name="email"
value = {this.state.email}
onChange ={this.onChange.bind(this) }
/>
<small className="form-text text-muted">我们使用了gravatar全球公认头像, 如果需要有头像显示, 请使用在gravatar注册的邮箱</small>
</div>
<div className="form-group">
<input
type="password"
className='form-control form-control-lg'
placeholder="密码"
name="password"
value = {this.state.password}
onChange ={this.onChange.bind(this) }
/>
</div>
<div className="form-group">
<input type="password"
className='form-control form-control-lg'
placeholder="确认密码"
name="password2"
value = {this.state.password2}
onChange ={this.onChange.bind(this) }
/>
</div>
<input type="submit" className="btn btn-info btn-block mt-4" />
</form>
</div>
</div>
</div>
</div >
)
}
}
export default Register;react获取input框的值
在开发中，我们比较常见的需要获取input框的值或者对input框的值判断是否为空，空的话给出提示
首先在input框添加一个onchange事件
<TextArea type="text" rows={4} value={reason} onChange={inputChange}/>inputChange里去更新reason的值，reason是input框里的内容
function inputChange(e){
dispatch({
type:'buyBackManage/updateState',
payload:{
reason:e.target.value
},
});
}给按钮一个点击事件
<Button type="primary" size={'large'} onClick={()=>rebut(reason)}>驳回</Button>rebut是去更改某个变量的值，我这里是修改rebutTip的值，由原来的none变成block
function rebut(reason){
console.log(reason)
if(reason.length===0)
{
dispatch({
type:'buyBackManage/updateState',
payload:{
rebutTip:'block'
},
});
}
console.log('123')
}上面的reason和rebutTip一开始在models中设定了初始值
rebutTip:'none', reason:''
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。