React --- 收集表单数据(非受控组件和受控组件)、函数柯里化

漂流の少年

已于 2022-12-16 16:18:25 修改

阅读量413

点赞数 1

分类专栏： React 文章标签： React javascript

于 2021-11-28 21:21:03 首次发布

本文链接：https://blog.csdn.net/YINZHE__/article/details/121597493

版权

React 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

需求：定义一个包含表单的组件，输入用户名密码后，点击登录提示输入信息(页面不刷新)

1.非受控组件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"></meta>
    <title></title>
  </head>
  <body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      class Login extends React.Component {
        handleSubmit = (event) => {
          event.preventDefault()
          const {username,password} = this
          alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
        }
        render() {
          return (
            <form 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>
</html>

2.受控组件

对于这种像input这样输入类的DOM，随着用户的输入，输入的数据被维护在状态state里，等需要用的时候再从状态state里面取出来

类似于Vue中的双向数据绑定

受控组件的优势在于：比上面的非受控组件少用了refs

<script type="text/babel">
  class Login extends React.Component {
    //保存用户名和密码到状态中
    saveUsername = (event) => {
      this.setState({username: event.target.value})
    }
    savePassword = (event) => {
      this.setState({password: event.target.value})
    }
    handleSubmit = (event) => {
      event.preventDefault()
      const {username,password} = this.state
      alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          用户名：<input onChange={this.saveUsername} type="text" name="username"/>
          密码：<input onChange={this.savePassword} type="password" name="password"/>
          <button>登录</button>
        </form>
      )
    }
  }
  ReactDOM.render(<Login/>, document.getElementById('test'))
</script>

3.函数柯里化

函数柯里化(currying)：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式

将我上面用受控组件写的例子改一下，下面的saveFormData函数就用到了函数柯里化

<script type="text/babel">
  class Login extends React.Component {
    //保存表单数据到状态中
    saveFormData = (dataType) => {
      return (event) => {
        this.setState({[dataType]:event.target.value})
      }
    }
    handleSubmit = (event) => {
      event.preventDefault()
      const {username,password} = this.state
      alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          用户名：<input onChange={this.saveFormData('username')} type="text" name="username" autoComplete="off"/>
          密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
          <button>登录</button>
        </form>
      )
    }
  }
  ReactDOM.render(<Login/>, document.getElementById('test'))
</script>

不用柯里化，我再改一下

<script type="text/babel">
  class Login extends React.Component {
    //保存表单数据到状态中
    saveFormData = (dataType, event) => {
      this.setState({[dataType]:event.target.value})
    }
    handleSubmit = (event) => {
      event.preventDefault()
      const {username,password} = this.state
      alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          用户名：<input onChange={event => this.saveFormData('username', event)} type="text" name="username" autoComplete="off"/>
          密码：<input onChange={event => this.saveFormData('password', event)} type="password" name="password"/>
          <button>登录</button>
        </form>
      )
    }
  }
  ReactDOM.render(<Login/>, document.getElementById('test'))
</script>