802_React_非受控组件

<script type="text/babel">
      //非受控组件：现用现取
      class Demo extends React.Component {
        handleSubmit = (e) => {
          //阻止默认事件，阻止页面跳转
          e.preventDefault();
          //password和username直接被添加在实例化对象身上
          const { username, password } = this;
          alert(`用户名是${username.value},密码是${password.value}`);
        };
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              用户名：
              <input type="text" ref={(c) => (this.username = c)} />
              密码：
              <input type="password" ref={(c) => (this.password = c)} />
              <button>登录</button>
            </form>
          );
        }
      }

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