react——event的preventDefault方法阻止默认事件，实现提交表单，提示表单信息，不跳转页面

其他 2021-03-08 16:23:39 阅读次数: 0

1.代码

  <body>
    <div id="test"></div>

    <script type="text/babel">
      "use strict";

      class Login extends React.Component {
    
    

        handleSubmit=(event)=>{
    
    
            event.preventDefault();//阻止默认事件
            const{
    
    username,password}=this;
            alert(`你输入的用户名是：${
      
      this.username.value}，你输入的密码是：${
      
      this.password.value}。`);
        }

        render() {
    
    
          return (
            <form action="https://www.baidu.com" onSubmit={
    
    this.handleSubmit}>
              用户名：
              <input
                ref={
    
    (c) => (this.username = c)}
                type="text"
                name="username"
              />
              密码：
              <input
                ref={
    
    (c) => (this.password = c)}
                type="password"
                name="password"
              />
              <button>登录</button>
            </form>
          );
        }
      }

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