react中多个onChange事件复用

在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加一个[]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值