reactjs - react js输入复选框组

Question

是否可以在 React 中创建一个输入复选框组？如果我映射了 3 个复选框并且只能单击一个复选框。我是否只给每个状态一个状态，然后在选中一个状态后取消选中其他状态？

我已经尝试过 radio 输入，但我需要能够将它们全部取消选中，而在 radio 组中，一旦你选择了一个，我就无法将它们全部取消选中。

Answer 1

为单选按钮创建一个单独的组件。

演示:https://jsfiddle.net/69z2wepo/74970/

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    };
    this.childs = [{checked:false},{checked:false},]

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(val,index) {  
  this.childs.forEach((data)=>{
  data.checked = false;
  })
        this.childs[index].checked=val;
    this.setState({})
  }

  render() {
  console.log(this.childs,"this.childs")

    return (
    <div>
       {
        this.childs.map((val,i)=>{
         return  <Child key ={i} index={i} checked={val.checked} handleChange={this.handleInputChange}/> 

        })
       }

    </div>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
   this.handleChange = this.handleChange.bind(this);
   }
   handleChange(event){
     var value = event.target.value;
         if(this.props.checked=='on'){
      value = false;
     }
     console.log(value);
     this.props.handleChange(value,this.props.index)
   }

    render() {
  return (
  <div>
    <input
            name="test"
            type="radio"
            checked={this.props.checked}
            onChange={this.handleChange} />
            </div>
  )
 }
}


ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
);

CSS:

radios>input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
}