802_React_受控组件

<script type="text/babel">
      class Login extends React.Component {
        //初始化状态
        state = {
          username: "", //用户名
          password: "", //密码
        };
        saveUsername = (e) => {
          this.setState({ username: e.target.value });
        };
        savePassword = (e) => {
          this.setState({ password: e.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.saveUsername} />
              密码：
              <input type="password" onChange={this.savePassword} />
              <button>登录</button>
            </form>
          );
        }
      }

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