HOWTO · React

在 React 中設定核取方塊屬性

設定預設選中值的過程可能會令人困惑。在本文中，我們將解釋常見問題並幫助你編寫更好的核取方塊

作者 Irakli Tchigladze發佈於 2021-12-04更新於 2023-10-12

JSX 中定義的表單不僅僅是簡單的 HTML 元素。表單應該儲存和傳輸內部資料，因此它們需要一個內部狀態來管理它。

讓我們以 HTML 核取方塊為例。在自然狀態下，HTML 核取方塊可以儲存 checked 屬性的值。但是，如果你正在開發應用程式，將資料儲存在元素的內部狀態中是不夠的。你需要在 React 應用程式的內部狀態中儲存 checked 屬性的值，以便你可以在整個應用程式中引用它。

React 中的核取方塊

React 中的核取方塊元素必須遵循一定的規則。10 年前，有條件地為 HTML 元素建立新屬性可能是可以接受的。這與 React 中的最佳實踐建議背道而馳。建立的任何核取方塊元素都必須帶有或不帶有 checked 屬性。

在沒有 checked 屬性的情況下啟動的核取方塊元素是不受控制的：

<input type="checkbox" name="uncontrolled"></input>

使用 checked 屬性定義的核取方塊元素受到控制：

<input type="checkbox" checked={true} name="controlled"></input>

<input> 元素必須作為受控或非受控元件啟動。一個常見的錯誤是將 checked 屬性設定為 null 或 undefined 值。JavaScript 編碼人員可能希望這些值自動轉換為 false 布林值，但 React 的工作方式不同。

令人困惑的錯誤

當 React 遇到任何具有 null 或 undefined 值的屬性時，它會忽略該屬性並且不渲染它。稍後，如果初始值變為 true，則會再次出現 checked 屬性，這會觸發從不受控制的元件更改為受控制的元件。

React 會丟擲一個錯誤，告訴你元件必須初始化為受控或非受控。如果核取方塊元件是在沒有 checked 屬性的情況下定義的，則以後無法新增。

很多人不知道在核取方塊上設定 checked 屬性會將其初始化為受控元件。這就是為什麼他們對錯誤訊息感到困惑的原因，該錯誤訊息如下：

Warning: AwesomeComponent is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

在 React 中設定核取方塊 `check` 屬性

一旦你理解了問題，修復它就很容易了。如果你打算建立一個受控核取方塊元件，你必須確保 checked 屬性的計算結果為 true 或 false。這可以通過設定 defaultProps 屬性並將 checked 屬性預設設定為 false 來實現。這是一個程式碼示例：

class App extends Component {
  constructor(props) {
    super(props) this.state = {}
  }
  render() {
    console.log('App started');
    this.defaultProps = {
      checked: false
    } return <input type = 'checkbox' checked = {this.checked} name =
                            'controlled'>< /input>
  }
}