03表单_受控组件与柯里化写法

受控组件与柯里化写法

理解

React 以setState()的方式控制表单取值与元素输入就叫做“受控组件”。

编码示例

例如，如果我们想让一个示例在提交时打印出名称，我们可以将表单写为受控组件：

class Demo extends React.Component {
  //初始化状态
  state = {
    username: "",
    password: "",
  };
  // 获取用户名并保存到state中
  saveUsername = (event) => {
    this.setState({ username: event.target.value });
    // console.log(event.target.value)
  };
  // 获取密码并保存到state中
  savePassword = (event) => {
    this.setState({ password: event.target.value });
    // console.log(event.target)
  };
  render() {
    return (
      <div>
        <form action="">
          用户名：
          <input type="text" name="username" onChange={this.saveUsername} />
          密码：
          <input type="password" name="password" onChange={this.savePassword} />
          <button>登录</button>
        </form>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById("root"));

柯里化写法

class Demo extends React.Component {
  //初始化状态
  state = {
    username: "",
    password: "",
  };

  // dataType 就是当前操作时的 state 数据
  saveFormDate = (dataType) => {
    return (event) => {
      // console.log(dataType, event.target.value);
      this.setState({
        [dataType]: event.target.value,
      });
    };
  };

  //取默认行为，弹窗提示个人信息
  handleSubmit = (event) => {
    const { username, password } = this.state;
    alert(`用户名是${username},密码是${password}`);
    event.preventDefault();
  };

  render() {
    return (
      <div>
        <form action="" onSubmit={this.handleSubmit}>
          用户名： // 将saveFormDate函数的返回值作为 onChange
          的回调，参数是状态(state)中的 username
          <input
            type="text"
            name="用户名"
            onChange={this.saveFormDate("username")}
          />
          密码： // 将saveFormDate函数的返回值作为 onChange
          的回调，参数值状态(state)中的 password
          <input
            type="password"
            name="密码"
            onChange={this.saveFormDate("password")}
          />
          <button>登录</button>
        </form>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, document.getElementById("root"));

不用柯里化

// dataType 就是当前操作时的state数据(username或者password)
  saveFormDate = (dataType, event) => {
    this.setState({
      [dataType]: event.target.value,
    });
  };

<input
  type="text"
  name="用户名"
  // 将 usernam 和 event 传递给 saveFormDate 函数进行处理
  onChange={(event) => {
    this.saveFormDate("username", event);
  }}
/>
<input
  type="password"
  name="密码"
  // 将 password 和 event 传递给 saveFormDate 函数进行处理
  onChange={(event) => {
    this.saveFormDate("password", event);
  }}
/>