react（21）——不使用函数柯里化功能实现表单验证

最新推荐文章于 2022-06-10 18:54:47 发布

木子旭

最新推荐文章于 2022-06-10 18:54:47 发布

阅读量108

点赞数

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

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

版权

react 专栏收录该内容

65 篇文章 5 订阅

订阅专栏

1.代码

<body>
  <div id="test"></div>
  <script type="text/babel">
    "use strict";
    class Login extends React.Component {
      state = {
        username: "",
        password: "",
      };
      saveFormData = (dataType,value) => {
        this.setState({[dataType]:value})
      };
      handleSubmit = (event) => {
        event.preventDefault(); //阻止默认事件
        const { username, password } = this.state;
        alert(`你输入的用户名是：${username}，你输入的密码是：${password
      };
      render() {
        return (
          <form action="https://www.baidu.com" onSubmit={this.handleSubm
            用户名：
            <input
              onChange={(event)=>{this.saveFormData('username',event.tar
              type="text"
              name="username"
            />
            密码：
            <input
              onChange={(event)=>{this.saveFormData('password',event.tar
              type="password"
              name="password"
            />
            <button>登录</button>
          </form>
        );
      }
    }
    ReactDOM.render(<Login />, document.getElementById("test"));
  </script>
</body>

2.代码讲解

总之onChange需要接收一个函数，然后这个函数可以才可以使用event参数

用户名：
<input
  onChange={(event) => {
    this.saveFormData("username", event);
  }}
  type="text"
  name="username"
/>
密码：
<input
  onChange={(event) => this.saveFormData("password", event)}
  type="password"
  name="password"
/>

方法简化处理

3.运行结果

在这里插入图片描述

木子旭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react（21）——不使用函数柯里化功能实现表单验证

1.代码<body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login extends React.Component { state = { username: "", password: "", }; saveFormData = (dataType,value)
复制链接

扫一扫