为什么不检查radiobutton?

时间:2016-12-19 15:54:49

标签: javascript html reactjs radio-button checked

我有

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

当我重新加载页面时,radiobutton会被检查,但当我尝试检查另一个时,我无法选择任何东西(无线电按钮中的点消失) 但当我点击保存它保存正确! (按下的最后一个radiobutton的值)。 我无法理解.. 也许有人知道什么是错的?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

您必须添加onClick事件才能更改is_active的值。

Expand-Archive <zipfile> -Password (Read-Host -AsSecureString -Prompt Password)