React 受控组件和非受控组件

分类 React 标签 React 评论:
  1. React 受控组件和非受控组件
  2. 受控组件
  3. 非受控组件

React 受控组件和非受控组件

什么是受控组件和非受控组件，这两个东西都是基于表单元素（如<input>、 <textarea> 和 <select>）来讨论的，其他类型的标签不存在受控和非受控的说法，那么，受控和非受控，控制的是什么呢，实际上就是控制表单元素的value，原生的表单元素value是元素自身维护的，我们不需要关心value的改变具体要怎么做，最后提交的时候拿到value就行了，而受控组件就是把表单元素的value拿来自己维护，不使用其自身的特性，非受控组件就需要依赖元素自身的value管理来实现

以<input>元素为例，我们原生的使用方式是这样的

<form action="" id="form">
    <input type="text" id="text">
    <input type="submit">
</form>

<script>
    document.querySelector('#form').addEventListener('submit', (e) => {
        let textInput = document.querySelector('#text')
        console.log(textInput.value)

        e.preventDefault()
    })
</script>

我们只是在提交的时候拿到表单的value，其中是如何修改value的我们并不关心

那我们在React中使用表单元素的时候，受控组件怎么做，非受控组件怎么做，下面来看看。

受控组件

我们上面说了，受控组件控制的是表单元素的value值，因此我们需要在组件内部自己维护value，然后赋值给表单，自己也需要定义方法来更新value

通过下面代码，我们就定义了一个受控组件，我们自己组件内部维护了一个value值，绑定给了<input>元素，并且value的更新都是我们自己控制。

import React from 'react'

class ControlledComp extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            value: ''
        }
    }

    handleChange = (e) => {
        this.setState({
            value: e.target.value
        })
    }

    submit = () => {
      console.log(this.state.value)
    }

    render () {
        return (
            <div>
                <input name="text" onChange={this.handleChange} value={this.state.value} />
                <button onClick={this.submit}>提交</button>
            </div>
        )
    }
}

export default ControlledComp

非受控组件

非受控组件我们组件内部不需要维护一个value值，也不用我们自己定义函数去更新value，而是交由表单元素自己去做，我们只需要拿到表单元素获取value就可以了

import React, {createRef} from 'react'

class UnControlledComp extends React.Component {
    constructor(props) {
        super(props)
        this.inputRef = createRef()
    }

    submit = () => {
      console.log(this.inputRef.current.value)
    }

    render () {
        return (
            <div>
                <input name="text" ref={this.inputRef} />
                <button onClick={this.submit}>提交</button>
            </div>
        )
    }
}

export default UnControlledComp

我们表单元素不止有<input>，还有<textarea>、<select>等，在<select>上我们绑定的值并不是value，而是checked，这就需要我们做进一步处理，下面是一个更复杂的例子

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          参与:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          来宾人数:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

上述例子来自React官网

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 289211569@qq.com

©2016-2023 Daryl