[解決済み] Reactでチェックボックスの "check "プロパティを設定する

質問

Reactとチェックボックスについて、非常に厄介な問題を抱えています。私が取り組んでいるアプリケーションでは、バックエンドに永続化される設定を表すチェックボックスのリストが必要です。 設定を元の状態に戻すオプションがあります。 .

まず、設定のマップのようなオブジェクトを持つコンポーネントを作成しました。各設定はキーとブール値を持っています。したがって

{
    bubbles: true,
    gregory: false
}

と表現することである。

<input type="checkbox" value="bubbles" checked="checked" />
<input type="checkbox" value="gregory" />

さて、Reactはチェックボックスがどのように機能するかについて無知なようです。私はチェックボックスの値を設定したいのではなく、"checked" プロパティが欲しいのです。

それでも、こんな風にやってみると

<input
    type="checkbox"
    value={setting}
    checked={this.settings[setting]}
    onChange={this.onChangeAction.bind(this)}
/>

こんな警告が出るんだけど。

警告 AwesomeComponent は、checkbox 型の非制御入力を制御入力に変更しようとしています。入力要素は、非制御型から制御型に (あるいはその逆に) 切り替わるべきではありません。コンポーネントの寿命が尽きるまで、controlled か uncontrolled の入力要素を使用するかどうか決めてください。詳細はこちら。[ 何度読んでも役に立たないドキュメントページ ]

そこで、個々のチェックボックスをラップするための別のコンポーネントを作成することにしたところ、次のようになりました。

<input
    type="checkbox"
    checked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

ここで checked は、私の状態に直接存在するプロパティです。

これでも同じ警告が出るので、試しに defaultChecked :

<input
    type="checkbox"
    defaultChecked={this.state.checked}
    onChange={this.onChangeAction.bind(this)}
/>

これにより、警告は消えますが、今度は checked の値をデフォルトのものに戻します。そこで、メソッドを弄ってみたところ componentWillReceiveProps この方法で、私は自分の状態が正しいことを確信しました。 this.state.checked が正しく表示され、コンポーネントが再びレンダリングされます。

そして、そうなる。しかし、チェックボックスは元のままです。 とりあえず、この醜い警告を残して、私は checked . どうすれば、警告が消えるように修正できますか？

おそらく、コンポーネントを強制的に再レンダリングする方法があるのではないかと考えていました。 defaultChecked の値を使用しています。しかし、その方法がわかりません。おそらく、次のような警告が表示されないようにするのでしょう。 だけ をこのコンポーネントで使用できますか？それは可能ですか？もしかして、他に何かできることがあるのでしょうか？

解決方法は？

を設定すると問題が発生します。 checked プロパティは、チェックボックスの null または undefined .

しかし、これらはJSではファルシーな値です。 Reactは null プロパティが設定されていないかのように を全く使用しません。チェックボックスのデフォルトの状態はチェックされていない状態なので、すべてうまくいきますが。次に checked から true React は、プロパティが突然存在するようになったと考えます! これは、React が非制御型から制御型に切り替えたと判断したときで、現在、プロパティの checked が存在します。

この例では、次のように変更することでこの警告を取り除くことができます。 checked={this.settings[setting]} を checked={!!this.settings[setting]} . ダブルバンに注目してください ( !! ). を変換するそうです。 null または undefined から false (そして true を登録すると、Reactはあなたの checked プロパティの値として false を作成し、制御されたフォームコンポーネントでスタートします。

私もこの問題を抱えていて、私も、この記事を読んで コントロールド・コンポーネントに関するドキュメント 何度やってもダメでしたが、やっとわかったので、共有したいと思います。また バージョン15.2.0 を設定することで、通常の入力がトリガーされ、制御されるようになります。 value を設定すると、チェックボックスが制御されるように初期化されます。 checked に関係なく value というプロパティがあり、少し混乱しました。