爲什麼單選按鈕沒有被選中？

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

您必須添加一個onClick事件才能更改is_active的值。

<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>