在 React 中設定核取方塊屬性

1. React 中的核取方塊
2. 在 React 中設定核取方塊 check 屬性

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

使用 defaultProps 的另一個優點是它們只代表預設值。使用者仍然可以與應用程式互動並更改 checked 屬性的狀態。

將 checked 屬性設定為 true 或 false 意味著不允許使用者更改其狀態。