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

最新推荐文章于 2022-11-29 10:45:24 发布

木子旭

最新推荐文章于 2022-11-29 10:45:24 发布

阅读量1.6k

点赞数

分类专栏： # react 文章标签： react javascript

本文链接：https://blog.csdn.net/qq_45895576/article/details/113417148

版权

react 专栏收录该内容

65 篇文章 5 订阅

订阅专栏

这篇博客详细讲解了如何在React应用中创建一个登录表单，利用回调函数绑定username和password输入字段到组件实例，并通过event.preventDefault()防止表单默认提交行为，实现登录信息的弹窗显示。示例代码展示了React的事件处理和状态管理。

摘要由CSDN通过智能技术生成

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>

2.代码讲解

通过回调函数方式将username和password绑定到this中
通过event的preventDefault方法，阻止网页跳转
通过反引号字符拼接，弹出提示框

3.运行结果

在这里插入图片描述

木子旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react（19）——event的preventDefault方法阻止默认事件，实现提交表单，提示表单信息，不跳转页面

1.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login extends React.Component { handleSubmit=(event)=>{ event.preventDefault();//阻止默认事件 con
复制链接

扫一扫