如何在Reactjs

Question

我需要在reactJS

中一次只选择一个未选中的复选框

createElement('div', {className: 'checkbox'},
  createElement('label', null,
    createElement('input', {
      type: 'checkbox',
      name: 'tssort',
      defaultChecked: !this.state.head,
      onChange: this.sorter
    }), 'Sort by action'),
    createElement('label', null,
      createElement('label', null,
        createElement('input', {
          type: 'checkbox',
          name: 'tssort',
          defaultChecked: this.state.head,
          onChange: this.sorter
        }),
     'Sort by Re-action')
    )
 ),

在this.sorter中，我使用this.setState将值设置为复选框，我尝试为复选框指定相同的名称，并一次只分配一个值。但至少从我的结果来看，这并不富有成效。指导我如何解决它。

Answer 1

而不是使用州，你可以去参考。 https://reactjs.org/docs/refs-and-the-dom.html

constructor(){
this.head=false;
}



  sorter(){
     this.refs.Sortbyaction.checked=!this.head;
     this.head=!this.head;
    }

createElement('label', null,
      createElement('input', {
        type: 'checkbox',
        name: 'tssort',
        ref:'Sortbyaction',
        defaultChecked: !this.state.head,
        onChange: this.sorter
        }),
            'Sort by action'
          )

Answer 2

您可以使用setState设置checked字段并更改onChange上的状态。

constructor(){
this.state = {
 checked = 'first',
}
}



 sorter(checkedItem){
      this.setState({checked:checkedItem});
    }

createElement('div', {className: 'checkbox'},
        createElement('label', 'first',
          createElement('input', {
            type: 'checkbox',
            name: 'tssort',
            checked : this.state.checked==='first',
            onChange: function(){this.sorter('second')},
            }),
                'Sort by action'
              ),

    createElement('label', 'second',
      createElement('input', {
        type: 'checkbox',
        name: 'tssort',
        checked : this.state.checked==='second',
        onChange: function(){this.sorter('second')},
        }),
            'Sort by Re-action'
          )
    )

    ),

Answer 3

如果你想做一个只有一个可以选择的可选列表，那么在UX方面最好的就是使用单选按钮。

Answer 4

您可以为这两个复选框指定不同的名称，然后使您的分拣机功能如下：

sorter(e){
  this.setState({[e.target.name]:e.target.checked})
}

然后您可以使用

访问该状态

  

this.state.nameOfTheCheckBox

此外，如果您不能使用ES6计算属性名称，则可以使用以下代码：

 sorter(e){
   var partialState = {};
   partialState[e.target.name] = e.target.value;
   this.setState(partialState);
   }