快捷導(dǎo)航

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

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

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

非受控組件

我們看一個簡單的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是一個非受控組件，它的輸入值是由頁面DOM控制的。輸入框的值被存儲在input元素的dom節(jié)點上。當(dāng)表單提交時，handleSubmit方法使用alert方法輸出該輸入元素的值。

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

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是一個受控組件，它的輸入值是由React控制的。輸入框的值被存儲在組件的狀態(tài)中。當(dāng)用戶輸入時，handleChange方法將更新輸入值的狀態(tài)。當(dāng)表單提交時，handleSubmit方法將使用console.log輸出輸入值。

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

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

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

<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>