Reactのcheckboxの "check"プロパティを設定する

Question

Reactとcheckboxには非常に厄介な問題があります。私が作業しているアプリケーションでは、バックエンドに保持されている設定を表すチェックボックスのリストが必要です。 設定を元の状態のに復元するオプションがあります。

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

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

は今、チェックボックスが動作するようになっている方法についての無知であるリアクトようだ：

{ 
    bubbles: true, 
    gregory: false 
} 

はとして表現されます。私はチェックボックスの値を設定したくない、私は "チェックされた"プロパティが必要です。しかし

、私はこのような何かしようとした場合：

警告：AwesomeComponentを制御することがタイプのチェックボックスの制御不能な入力を変更している

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

を、私はこの警告を取得します。入力要素は、制御されていない状態から制御された状態に切り替わるべきではありません（またはその逆）。コンポーネントの寿命の間、制御された入力要素または制御されていない入力要素を使用するかどうかを決めます。さらに詳しい情報：今すぐ

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

警告が表示されなくなりますが、今ではデフォルトの1にchecked値をリセットすることができませんどの。だから私は方法componentWillReceivePropsで試してみました。私の状態が正しいと確信しています。this.state.checkedは正しいですし、コンポーネントは再びレンダリングされます。

そしてそうです。しかし、チェックボックスは元のままです。 今のところ私はその醜い警告を残して、checkedを使用しています。 警告が消えるようにこの問題を修正するにはどうすればよいですか？

コンポーネントを強制的に再レン​​ダリングする方法があると思われていたので、新しいdefaultChecked値を取得して使用します。しかし、私はそれをどうやって行うのか分かりません。おそらくこのコンポーネントの警告を抑制するでしょうか？それは可能ですか？おそらく他にもできることがありますか？

Answer 1

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

これらはJSの「誤った」値ですが、React treats a value of null as if the property was not setはまったくありません。チェックボックスのデフォルト状態はチェックされていないので、すべてうまく動作します。 checkedをtrueに設定した場合リアクションはプロパティが突然存在すると思います！これは、あなたが制御されていない状態から制御された状態に切り替わったときのリアクション数字です。プロットcheckedが存在するようになりました。

この例では、checked={this.settings[setting]}をchecked={!!this.settings[setting]}に変更してこの警告を取り除くことができます。ダブル・バン（!!）に注目してください。彼らはnullまたはundefinedをfalseに変換し（trueのみ）、Reactはcheckedプロパティの値をfalseに登録し、制御されたフォームコンポーネントから始めます。

私もこの問題を抱えていましたが、私もdocs about controlled-componentsのサーバー時間を無駄に読んでいましたが、最終的にそれを理解したので、分かち合うと思いました。また、valueによって制御されるようにversion 15.2.0の通常の入力がトリガーされるため、チェックボックスは、のプロパティにかかわらず、設定値checkedによって制御されて初期化されます。

Answer 2

基本的に、defaultCheckedは、入力を制御したくないことを意味します。この値でレンダリングするだけで、制御する方法はありません。また、valueは使用しないでください。checkedの代わりに、2番目のコードが正しいはずです。両方を同時に使うべきではありません。

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

この動作で小さなフィドルを作成できますか？

Answer 3

あなたは状態にデータを割り当て、状態の

{ this.state.data.map(function(item, index) { 
     return (

     <input type="checkbox" checked={item.value} onChange={this.handleChange.bind(this, index)}/> 

    ); 
    }.bind(this)) 
    } 

サンプルデータとして状態を設定するために、個々のチェックボックスに関連付けられているcheckedプロパティが

data: [{name:'bubbles', value: true}, {name:'gregory', value: false}] 

ようであるのを利用することができ

JSFIDDLE

Answer 4

アメーバの答えは正しいですが、私は二重銀行（!!）より清潔な解決策があると思います。私は私が原因リアクトから非常に具体的な警告メッセージに問題を理解して考えているため、無駄な時間が経つにつれて

import React from 'react'; 

const Checkbox = ({checked}) => (
    <div> 
     <input type="checkbox" checked={checked} /> 
    </div> 
); 

Checkbox.defaultProps = { 
    checked: false 
}; 

export default Checkbox;