了解rect中的Uncontrolled與ControlledInput元素

作者:

了解rect中的Uncontrolled與ControlledInput元素

在開發網頁時，我們經常會遇到一個錯誤：「一個元件正在改變一個未受控制的文本輸入，該輸入應該保持受控或未受控狀態，不應該互相轉換。」這個錯誤提示我們，在開發網頁時，應該選擇受控或未受控的輸入元素，並且在整個開發過程中保持一致。

什麼是受控和未受控的輸入元素？

受控的輸入元素是指，當用戶在輸入框中輸入文字時，該文字會被綁定到應用程序的狀態中，並且會被應用程序的更新時自動更新。受控的輸入元素可以使用React的state來實現，例如：

class MyForm extends React.Component {
  state = {
    inputValue: ''
  };

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

  render() {
    return (
      <input
        type="text"
        value={this.state.inputValue}
        onChange={this.handleChange}
      />
    );
  }
}

未受控的輸入元素是指，當用戶在輸入框中輸入文字時，該文字不會被綁定到應用程序的狀態中，而是直接更新到DOM中，並且不會被應用程序的更新時自動更新。未受控的輸入元素可以使用React的ref來實現，例如：

class MyForm extends React.Component {
  inputRef = React.createRef();

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.inputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

為什麼不能混用受控和未受控的輸入元素？

因為受控的輸入元素是由應用程序的狀態控制的，而未受控的輸入元素是由DOM控制的，如果混用受控和未受控的輸入元素，就會導致應用程序的狀態和DOM的狀態不一致，導致應用程序出現錯誤。

總結

在開發網頁時，我們應該選擇受控或未受控的輸入元素，並且在整個開發過程中保持一致，不能混用受控和未受控的輸入元素，否則會導致應用程序出現錯誤。

推薦閱讀文章

推薦閱讀文章

            <a href="https://www.freecodecamp.org/news/controlled-vs-uncontrolled-inputs-in-react-a354715d1121/">Controlled vs Uncontrolled Inputs in React</a><br>
            <a href="https://blog.bitsrc.io/understanding-controlled-and-uncontrolled-components-in-react-e2f4d2f7f2f2">Understanding Controlled and Uncontrolled Components in React</a><br>
            <a href="https://www.telerik.com/blogs/react-controlled-vs-uncontrolled-components">React Controlled vs Uncontrolled Components</a><br>
            <a href="https://www.codementor.io/@blizzerand/controlled-and-uncontrolled-form-components-in-react-j2x5cjq6z">Controlled and Uncontrolled Form Components in React</a><br>
            <a href="https://www.digitalocean.com/community/tutorials/react-controlled-uncontrolled-components">React Controlled and Uncontrolled Components</a

延伸閱讀本站文章

更多rect相關文章

推薦學習youtube影片

發佈留言