三种方式实现事件处理函数中同时传event和其他参数
1.通过bind绑定
2.箭头函数回调
3.返回函数的柯里化形式
// 代码示例
class LoginForm extends React.Component {
state = {
username: '',
password: '',
phone: ''
}
// 表单提交
formSubmit = (event) => {
event.preventDefault()
const {username, password, phone} = this.state
console.log(`${username} ` + `${password} ` + `${phone}`);
}
// 多个字段存储-普通方式-传多个参数
saveFormData = (dataType, event) => {
this.setState({
[dataType]: event.target.value
})
}
// 多个字段存储:函数柯里化方式
saveFormData2 = (dataType) => {
return (event) => {
this.setState({
[dataType]: event.target.value
})
}
}
render () {
return (
<form onSubmit={this.formSubmit}>
{/* 1.bind传参 */}
用户名:<input onChange={this.saveFormData.bind(this, 'username')} type="text" name="username" />
{/* 2.箭头函数传参 */}
密码:<input onChange={(e)=> this.saveFormData('password', e)} type="password" name="password" />
{/* 3.函数柯里化 */}
手机:<input onChange={this.saveFormData2('phone')} type="text" name="phone" />
<button>登录</button>
</form>
)
}
}