React 表单绑定传值的优化

原始代码

在一些input事件中 像比如 onchange onclick oninput … 这些事件所绑定的值 都是一个回调函数
我们可以发现。当我们绑定的函数如果没有括号执行的时候 此时该函数可拿到该事件的 event 参数
如下：

<input onChange="this.handleChange" type="text" />

handleChange = (e) => {
console.log(e.target.value) // 此时输出的结果是用户输入的结果
}

而当我们这样使用时

<input onChange="this.handleChange('hello')" type="text" />

handleChange = (val) =>{
console.log(val) // 此时没有输出结果
}

因为这些事件所绑定的值 都是一个回调函数

优化后代码

那如果我们需要自定义传值并拿到用户输入的值该怎么办呢

我们现在可以这样做

<input onChange="this.handleChange('输入了')" type="text" />

handleChange = (val) => {
	return (e) => {
		console.log(val,e.target.value) // 此时输出的结果是 “输入了” + 用户输入的结果
	}

}