二、受控于非受控组件

受控组件与非受控组件

在大多数情况下，推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以 使用 ref 来从 DOM 节点中获取表单数据

<script type="text/babel">
    // 页面中的所有输入类标签，随着你的输入把内容维护到state中，
    // 需要的时候直接从state中取值，这就是受控组件。
    // 优点：尽量避免使用ref

    // 非受控组件
    /* class Login extends React.Component {
      handleSubmit = ()=>{
        const {username,password} = this
        console.log(username.value,password.value);
      }
      render() {
        return (
          <div>
            <input ref = {c=>this.username = c} type="text" placeholder='请输入账号' />
            <input ref = {c=>this.password = c} type="password"  placeholder='请输入密码'/>
            <br />
            <button onClick = {this.handleSubmit}>登录</button>
          </div>
        );
      }
    } */

    // 受控组件
    class Login extends React.Component {
      state = {
        username: "",
        password: "",
      };
      // 提交数据
      handleSubmit = () => {
        const {username,password} = this.state
        alert(`${username}---${password}`)
      };
      saveUsername = (e) => {
        this.setState({ username: e.target.value });
        console.log(e.target.value);
      };
      savePassword = (e) => {
        this.setState({ password: e.target.value });
        console.log(e.target.value);
      };
      render() {
        return (
          <div>
            <input
              onChange={this.saveUsername}
              type="text"
              placeholder="请输入账号"
            />
            <input
              onChange={this.savePassword}
              type="password"
              placeholder="请输入密码"
            />
            <br />
            <button onClick={this.handleSubmit}>登录</button>
          </div>
        );
      }
    }

    ReactDOM.render(<Login />, document.getElementById("app"));
  </script>