React 受控組件和非受控組件的區別

Question

我是新手，在學習過程中我遇到了這個受控組件的例子。

function App() {
  let [fName, setFName]=useState('');

  return (
    <div className="container">
      <h1>Hello {fName }</h1>
      <input name ='fname' value={fName} onChange={(e)=> setFName(e.target.value)} type="text" placeholder="What's your first name?" />

    </div>
  );
}

只需添加value={fName}控制。 我實際上不明白受控組件和不受控制是什么意思。 你能從初學者的角度解釋一下嗎？

Answer 1

受控組件

這些組件具有所謂的回調函數，每次我們在表單元素中輸入新內容時都會觸發該函數。

觸發該函數通常會存儲或更新我們在顯示使用過的表單元素的同一個 React 組件中鍵入的內容

最廣泛地將它與forms

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

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

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

不受控制的組件

這些組件（例如<input>通常會維護自己的狀態並根據用戶輸入對其進行更新。

換句話說，他們會接受我們鍵入的內容並有責任記住它，並且為了檢索他們記住的值，您必須在需要時獲取它。

后者通常發生在表單提交期間。 它們可以歸類為不受控制的組件。

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} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 2

不受控制的組件意味着您將讓組件本身管理值。 它自己的內部機制會跟蹤它。

現在，當您將value屬性添加到輸入組件時，您將開始自己“控制”該組件。 您放入該屬性的值將是將顯示的值。 您可以自己控制值，只需按原樣傳入，或在傳入之前更改值。

Answer 3

在這里，Reactjs 文檔提供了解釋。

• 受控組件是通過 props 獲取其當前值並通過onChange回調通知更改的組件。 父組件通過處理回調和管理自己的狀態並將新值作為道具傳遞給受控組件來“控制”它。 您也可以將其稱為啞組件/無狀態組件。

• 不受控制的組件是一種在內部存儲自己狀態的組件，您可以在需要時使用 ref 查詢 DOM 以查找其當前值。 這有點像傳統的 HTML。

React 表單組件支持受控和非受控使用：

// 不受控制：

<input type="text" defaultValue="hey" ref={inputRef} />

// 控制：

<input type="text" value={this.state.value} onChange={onHandleChange} />