在react中input的value是通过this.state.value动态绑定的,动态的修改需要通过onChange事件,但是如果有好多个input需要动态修改,但是事件又是一样的,只是value的值不一样,这时候就需要onChange事件的复用了
<Input value = {this.state.name} onChange = {(e) => {this.changeInput(‘name’,e)} } style = {{width:“150px”}} placeholder=“姓名” />
<Input value = {this.state.phone} onChange = {(e) => {this.changeInput(‘phone’,e)} } style = {{width:“150px”}} placeholder=“手机号” />
比如上上面这个按钮姓名和手机号是通过onChange事件动态输入的,当还有更多的时候,onChange事件的复用就要体现出来了
//input onchange触发
changeInput = (type, e) => {
this.setState({
//setState 里 key如果传一个变量会自动被处理为一个字符串而不是变 解决方案 给key加一个[]
[type] : e.target.value
})
}
通过传递的type的不同来修改不同的state
setState 里 key如果传一个变量会自动被处理为一个字符串而不是变 解决方案 给key加一个[]