React事件处理函数中同时传event和其他参数

三种方式实现事件处理函数中同时传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>
        )
      }
    }