なぜラジオボタンがチェックされていないのですか？

Question

私はページのラジオボタンをリロードすると、私は

<input type='radio' name='is_active' value='true' checked={this.props.is_active==true ? true : false}/> Active 
<input type='radio' name='is_active' value='false' checked={this.props.is_active==false ? true : false}/> Passive 
... 
<button>Save</button> 

を持っているが、それが必要としてチェックされているが、私は別のものをチェックしようとすると、私は何を選択することはできません（ラジオボタンのドットが消える） しかし、私はそれを保存]をクリックしたときに右の節約します!!! （押された最後のラジオボタンの値）。 私は理解できません。 誰かが間違っていることを知っているのでしょうか？

Answer 1

あなたは、新しい値を使用してhtmlを表示するための状態を持っている必要があります。 （あなたがES6を使用している場合） は、このようなあなたの初期状態を設定します。

constructor (props) { 
super(props) 
this.state = { 
    is_active: this.props.is_active 
} 
} 

も、あなたは状態が変更される、ボタンのクリック時にコールする機能が必要になります。

setCheckedValue (val) { 
this.setState({is_active: val}) 
} 

、最終的にあなたのhtmlは次のようになります：

<input type='radio' name='is_active' value='true' checked={this.state.is_active==true ? true : false} onClick={this.setCheckedValue.bind(this, 'true')}/> Active 
<input type='radio' name='is_active' value='false' checked={this.state.is_active==false ? true : false} onClick={this.setCheckedValue.bind(this, 'false')}/> Passive 

Answer 2

is_activeの値を変更するには、onClickイベントを追加する必要があります。

<label><input type='radio' name='is_active' value='true' checked={this.props.is_active==true ? true : false} onClick={this.props.is_active=true} /> Active</label> 
<label><input type='radio' name='is_active' value='false' checked={this.props.is_active==false ? true : false} onClick={this.props.is_active=false} /> Passive</label>              
<button>Save</button>