深入了解 React 中的受控與未受控輸入元素:2025 最新教學

了解rect中的Uncontrolled與ControlledInput元素

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

目錄

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

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

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

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

  render() {
    return (
      
    );
  }
}

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

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

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

  render() {
    return (
      
); } }

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

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

常見錯誤排除

1. **狀態不一致**:檢查是否在同一個組件中混用了受控和未受控的元素。
2. **事件處理器**:確保 `onChange` 事件正確綁定到受控元素,以便更新狀態。
3. **ref 使用**:確認 `ref` 是否正確設置,且在提交表單時能夠獲取到正確的值。

延伸應用

– 在表單提交時,可以將受控輸入的數據發送到後端進行處理。
– 使用未受控輸入來處理較簡單的用戶輸入情況,例如搜索欄位。
– 結合使用受控和未受控輸入來提升用戶體驗,例如在表單中使用受控元素顯示即時反饋。

Q&A(常見問題解答)

Q1: 受控和未受控輸入元素有什麼區別?

A1: 受控輸入元素的值由 React 的 state 控制,而未受控輸入元素的值直接由 DOM 控制,不受狀態影響。

Q2: 在何時使用受控輸入元素較好?

A2: 當需要在用戶輸入時即時反饋或者提交數據時,使用受控輸入元素會更加可靠。

Q3: 如何轉換未受控輸入為受控輸入?

A3: 將未受控輸入的值綁定到 React 的 state 當中,並在 `onChange` 事件中更新狀態即可。

發佈留言