美文网首页
react 之非受控组件和受控组件

react 之非受控组件和受控组件

作者: wilsonLwx | 来源:发表于2021-12-31 11:43 被阅读0次

所谓非受控组件，就像传统的HTML表单那样，它记住了你输入的内容，之后你可以使用ref来获去你输入的内容，如下：

class Example extends Component {
  handleInpurt = () => {
    console.log(this.input.value)
  }
  render() {
    return (
      <div>
        <input ref={words => this.input = words} type='text' />
        <button onClick={this.handleInpurt}>submit</button>
      </div>
    )
  }
}

换句话说，就是当你提交form后，你必须要通过相应的字段来'拉取'你需要的值，这是表单输入最简单的实现方法。不管是在学习react的过程中，还是在真正的开发中，有很多有效的例子可以使用他，但是他的功能并不那么强大。

而所谓受控组件，官网是这么描述的:

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

看下面的示例：

class Example extends Component{
  state = {
    username: '',
    password: ''
  }

  handleSubmit = (event) => {
    // 阻止表单提交
    event.preventDefault()
    const {username, password} = this.state
    console.log(username)
    console.log(password)
  }

  saveUserinfo = (dataType) => {
    // 返回一个回调函数
    return (event) => {
      this.setState({[dataType]: event.target.value})
    }
  }

  render(){
    return (
      <form action='https://xxxx.com' onSubmit={this.handleSubmit}>
        username: <input onChange={this.saveUserinfo('username')} type='text' name='username'/>
        password: <input onChange={this.saveUserinfo('password')} type='text' name='password' />
        <button>登录</button>
      </form>
    )
  }
}

用户的输入通过onChange事件存入state，提交按钮用于输出用户提交信息。

相关文章

  • React 的几个注意点

    受控组件和无状态组件 非受控组件推荐使用受控组件来实现表单. 在受控组件中, 表单数据是有React组件处理如果让...

  • react 之非受控组件和受控组件

    所谓非受控组件，就像传统的HTML表单那样，它记住了你输入的内容，之后你可以使用ref来获去你输入的内容，如下： ...

  • React 初探之 受控组件 VS 非受控组件

    概述 React 中的受控组件和非受控组件都是针对于表单数据而言的。React 推荐使用受控组件来处理表单数据。 ...

  • React 受控组件和非受控组件

    https://goshakkk.name/controlled-vs-uncontrolled-inputs-r...

  • [React]受控组件和非受控组件

    受控组件 我们先来看一个例子 我们要经常使用表单来搜集用户输入，例如 等元素都要绑定一个c...

  • react 受控组件和非受控组件

    受控组件 在html中， 表单元素 , , 一般保存自己的状态并根据用户的输入更新。在react中一般根据组...

  • React 受控组件和非受控组件

    1.受控组件的基本使用 在 HTML 中，表单元素（如、