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

react 受控组件和非受控组件

作者: 米诺zuo | 来源:发表于2021-04-16 17:44 被阅读0次

受控组件

在html中， 表单元素<input>, <textarea>, <select> 一般保存自己的状态并根据用户的输入更新。在react中一般根据组件state属性保存， 只能通过setState更新，这种方式控制取值的表单输入元素就叫做受控组件。

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>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

React 受控组件更新 state 的流程:
（1）可以通过在初始 state 中设置表单的默认值。
（2）每当表单的值发生变化时，调用 onChange 事件处理器。
（3）事件处理器通过合成事件对象 e 拿到改变后的状态，并更新应用的 state。
（4）setState 触发视图的重新渲染，完成表单组件值的更新。

非受控组件

form 数据被DOM本身控制，可以用ref获取value，叫非受控组件。

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input}   defaultValue="Bob"/>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

在react 中， <input type='file'> 是一个非受控组件。因为value只可以被用户设置,而不能通过代码控制。

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${this.fileInput.current.files[0].name}`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

相关文章

  • React 的几个注意点

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

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

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

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

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

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

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

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

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

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

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