802_React_函数柯里化

<script type="text/babel">
      //高阶函数：接收的参数是一个函数或者返回的是一个函数
      //函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
      //非受控组件：现用现取
      class Login extends React.Component {
        //初始化状态
        state = {
          username: "", //用户名
          password: "", //密码
        };
        saveFormdata = (dataType) => {
          console.log(this);
          return () => {
            //从state状态里面取值，当输入用户名时[dataType]相当于username,当输入密码时[dataType]相当于password
            this.setState({ [dataType]: event.target.value });
          };
        };

        handleSubmit = (e) => {
          e.preventDefault(); //阻止表单提交
          const { username, password } = this.state;
          alert(`用户名是${username},密码是${password}`);
        };
        render() {
          return (
            //相当于Vue里面的双向数据绑定，把数据维护在状态state里面，要用的时候直接从state里面拿
            <form onSubmit={this.handleSubmit}>
              用户名：
              <input type="text" onChange={this.saveFormdata("username")} />
              密码：
              <input type="password" onChange={this.saveFormdata("password")} />
              <button>登录</button>
            </form>
          );
        }
      }

      //渲染
      //这里面的{...p}，相当于展开name: "Tom", sex: "男", age: "18"
      ReactDOM.render(<Login />, document.getElementById("test"));
    </script>