快捷導(dǎo)航

React中的受控組件與非受控組件詳解

更新時(shí)間：2023年08月28日 10:20:57 作者：石小石Orz

在React中,受控組件指的是表單元素的value值受React組件的state或props控制的組件,而非受控組件則是表單元素的value值由DOM自身負(fù)責(zé)管理的組件,本文將給大家詳細(xì)介紹React受控組件與非受控組件,需要的朋友可以參考下

非受控組件

我們看一個(gè)簡單的demo

<script type="text/babel">
  // 1、創(chuàng)建組件
  class UncontrolledComponent extends React.Component {
    handleSubmit = (event) => {
      event.preventDefault();
      alert(this.input.value);
    };
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            <input type="text" ref={(input) => (this.input = input)} />
          </label>
          <button type="submit">提交</button>
        </form>
      );
    }
  }
  // 2、渲染組件
  ReactDOM.render(<UncontrolledComponent />, document.getElementById("test"));
</script>

頁面效果

上面的代碼中，UncontrolledComponent是一個(gè)非受控組件，它的輸入值是由頁面DOM控制的。輸入框的值被存儲(chǔ)在input元素的dom節(jié)點(diǎn)上。當(dāng)表單提交時(shí)，handleSubmit方法使用alert方法輸出該輸入元素的值。

這里使用了ref屬性來獲取input元素的dom節(jié)點(diǎn)

event.preventDefault阻止form表單的默認(rèn)提交事件

受控組件

<script type="text/babel">
  // 1、創(chuàng)建組件
  class ControlledComponent extends React.Component {
    // 初始化state狀態(tài)值
    state = {
      inputValue: "",
    };
    handleChange = (event) => {
      this.setState({ inputValue: event.target.value });
    };
    handleSubmit = (event) => {
      event.preventDefault();
      console.log(this.state.inputValue);
    };
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            Input:
            <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }
  }
  // 2、渲染組件
  ReactDOM.render(<ControlledComponent />, document.getElementById("test"));
</script>

頁面效果

上面的代碼中，ControlledComponent是一個(gè)受控組件，它的輸入值是由React控制的。輸入框的值被存儲(chǔ)在組件的狀態(tài)中。當(dāng)用戶輸入時(shí)，handleChange方法將更新輸入值的狀態(tài)。當(dāng)表單提交時(shí)，handleSubmit方法將使用console.log輸出輸入值。

如果我們熟悉vue，會(huì)發(fā)現(xiàn)這里的state非常像vue中的雙向數(shù)據(jù)綁定data，我們通過onChange事件實(shí)時(shí)的更新狀態(tài)中的inputValue值，然后通過handleSubmit函數(shù)展示最新數(shù)據(jù)。

雙向數(shù)據(jù)綁定

借助受控組件的特性，我們完全在類組件中可以實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例。

<script type="text/babel">
  // 1、創(chuàng)建組件
  class ControlledComponent extends React.Component {
    state = {
      inputValue: "",
    };
    handleChange = (event) => {
      this.setState({ inputValue: event.target.value });
    };
    handleSubmit = (event) => {
      event.preventDefault();
      console.log(this.state.inputValue);
    };
    render() {
      return (
        <form onSubmit={this.handleSubmit}>
          <label>
            <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
          </label>
          <span>{this.state.inputValue}</span>
        </form>
      );
    }
  }
  // 2、渲染組件
  ReactDOM.render(<ControlledComponent />, document.getElementById("test"));
</script>