React でチェックボックスプロパティを設定する

1. React のチェックボックス
2. React でチェックボックスチェックプロパティを設定する

JSX で定義されているフォームは、単なる HTML 要素ではありません。フォームは内部データを保存および転送することになっているため、フォームを管理するには内部状態が必要です。

例として HTML チェックボックスを取り上げましょう。自然な状態では、HTML チェックボックスは checked 属性の値を格納できます。ただし、アプリを開発している場合は、要素の内部状態でデータを保存するだけでは不十分です。checked 属性の値を React アプリの内部状態に保存して、アプリ全体で参照できるようにする必要があります。

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 でチェックボックスチェックプロパティを設定する

問題を理解すれば、修正は非常に簡単です。制御されたチェックボックスコンポーネントを作成する場合は、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 を使用するもう 1つの利点は、デフォルトのみを表すことです。ユーザーは引き続きアプリを操作して、checked 属性のステータスを変更できます。

checked 属性を true または false に設定すると、ユーザーはそのステータスを変更できなくなります。