Question

我已启用多重检查单选按钮。但是如何启用unCheck

<div id ="box"></div>
<script type="text/babel">

    class Radio extends React.Component{
    constructor(props) {
    super(props);
    this.state = {option: 'a'};
    }
     setRadio(e){
        this.setState({option: e.target.value});     
     }
      render(){
         return(<div>   
          <div onChange={this.setRadio.bind(this)}  >      
          <b>Select :</b> <br />
          <input type="radio" value="a" name="a"/>a
          <input type="radio" value="b" name="b"/>b
          <input type="radio" value="c" name="c"/>c
          <input type="radio" value="d" name="d"/>d
          <input type="radio" value="e" name="e"/>e
      </div>
      </div>);
      }
    }

    ReactDOM.render(<Radio /> , document.getElementById('box'));
</script>

我无法添加unCheck选项。我只需要添加到方法 setRadio（e） 以启用取消选中。谢谢你的帮助

Answer 1

根据我的理解，你想检查多个单选按钮，在这种情况下你应该使用复选框而不是单选按钮，并在每个复选框上有一个onChange而不是div

＆＃13;

class Checkbox extends React.Component{
constructor(props) {
super(props);
this.state = {option: {
    'a': false,
    'b': false,
    'c': false,
    'd': false,
    'e': false
}};
}
 setCheckbox(val){
   var option = {...this.state.option}
   option[val]= !option[val]
    this.setState({option});     
 }
  render(){
     return(<div>   
      <div  >      
      <b>Select :</b> <br />
      <input type="checkbox" onChange={()=> this.setCheckbox('a')} value="a" name="a" checked={this.state.option['a']}/>a
      <input type="checkbox" onChange={()=> this.setCheckbox('b')} value="b" name="b" checked={this.state.option['b']}/>b
      <input type="checkbox" onChange={()=> this.setCheckbox('c')} value="c" name="c" checked={this.state.option['c']}/>c
      <input type="checkbox" onChange={()=> this.setCheckbox('d')} value="d" name="d" checked={this.state.option['d']}/>d
      <input type="checkbox" onChange={()=> this.setCheckbox('e')} value="e" name="e" checked={this.state.option['e']}/>e
  </div>
  </div>);
  }
}

ReactDOM.render(<Checkbox /> , document.getElementById('box'));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id ="box"></div>

＆＃13;

如何启用多重检查启用unCheck单选按钮？

1 个答案: