状態を変更するラジオボタンの選択

Question

input type="radio"を設定して、ユーザーが選択する状態の値が変わるようにするにはどうすればよいですか？

この場合、ボタンname="1"をデフォルトの選択ボタンにしたいが、ボタンname="2"が選択されている場合は、状態値が変更されるはずです。

<div data-toggle="buttons"> 
    <label> 
    <input type="radio" name="1" defaultChecked onChange={this.handleRadioButton}>Option 1</input> 
    </label> 
    <label> 
    <input type="radio" name="2" onChange={this.handleRadioButton}>Option 2</input> 
    </label> 
</div> 

Answer 1

handleRadioButtonにはどのボタンがクリックされたかを知らせる必要があります。私は単純な関数パラメータを提案します。すなわち

onChange={() => this.handleRadioButton(1)}

onChange={() => this.handleRadioButton(2)}

あなたの関数は次のようになります。

handleRadioButton(value) { 
    this.setState({ 
    value: value 
    }); 
} 

最後に、チェック状態は、その状態値から読み取る必要があります。すなわち

checked={this.state.value === 1}

のでカップルより多くの事...一緒に

<input type="radio" checked={this.state.value === 1} onChange={() => this.handleRadioButton(1)} />

<input type="radio" checked={this.state.value === 2} onChange={() => this.handleRadioButton(2)} />

をそれをすべて置く：

• がdefaultCheckedと気にしないでくださいプロパティ。初期状態でvalue: 1と設定してください。
• nameやvalueなどのHTML属性は必要ありません。 Reactでは、HTMLロジックはJavaScriptロジックに取って代わられています。 （警告：非JSレンダリングされたサーバーを提供している場合を除き）