作出反应 - 不能单独选择一个复选框选中后，他们都使用“全选”复选框

Question

我是一个初学者反应，我真的很难找出什么我做错了，我想我的填充数组位置检查复选框的值，以便能够POST有效载荷。

我的“位置”复选框，在我的DOM动态添加旁边的“全选”复选框。

当我点击我的位置复选框时，我可以在控制台上看到该复选框的值添加了positionChecked [] 但是小蓝色复选框从未触发。触发/取消触发的唯一方法是点击“全选”复选框。

位置复选框失去了他们的状态控制。

App.js

const items = [ 
    'Position 1', 
    'Position 2', 
    'Position 3' 
]; 

class AppG extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      positionChecked: [], 
      selectAll: false, 
     }; 
     this.handleCheckboxSelection = this.handleCheckboxSelection.bind(this); 
     this.handleSelectAll = this.handleSelectAll.bind(this); 
    }; 

    handleCheckboxSelection(e) { 
     e.preventDefault(); 
     const newSelection = e.target.value; 
     let newSelectionArray; 
     if(this.state.positionChecked.indexOf(newSelection) > -1) { 
      newSelectionArray = this.state.positionChecked.filter(s => s !== newSelection) 
     } else { 
      newSelectionArray = [...this.state.positionChecked, newSelection]; 
     } 
     this.setState({ positionChecked: newSelectionArray},() => console.log('position selection', this.state.positionChecked)); 
    }; 

    handleSelectAll(e) { 
     this.setState({selectAll:e.target.checked},() => console.log(this.state.selectAll)); 
    }; 

    handleSubmit = (e) => { 
     e.preventDefault(); 
     const formPayload = { 
      positionChecked: this.state.positionChecked, 
     }; 
     console.log('Send this in a POST request:', formPayload); 
     console.log(this.refs.checkbox.value); 
    }; 

    createCheckboxes = (items) => (
     items.map(this.createCheckbox) 
    ); 

    createCheckbox = item => (
     <Checkbox 
      inline 
      value={item} 
      onChange={this.handleCheckboxSelection} 
      checked={this.state.selectAll} 
      key={'position'} 
      type={'checkbox'}> 
      {item} 
     </Checkbox> 
    ); 

    render() { 
     return (
      <div> 
       <h1>Reporting by group</h1> 
       <Jumbotron> 
        <Grid> 
         <Row className="show-grid"> 
          <Col sm={3}> 
          </Col> 
          <Col sm={6}> 
           <form onSubmit={this.handleSubmit} ref={form => this.form = form}> 
            <InputGroup /> 
            <FormGroup style={styles}> 
             <Checkbox 
              inline 
              onChange={this.handleSelectAll} 
              checked={this.state.selectAll} 
              key={'All'} 
              value={'All'} 
              type={'checkbox'}>All 
             </Checkbox> 
             {this.createCheckboxes(items)} 
            </FormGroup> 
            <Datepicker /> 
            <ButtonComponent type="submit" value="Submit"/> 
           </form> 
          </Col> 
          <Col sm={3}> 
           <NavComponent/> 
          </Col> 
         </Row> 
        </Grid> 
       </Jumbotron> 
      </div> 
     ); 
    } 
} 

Answer 1

试试这个：

createCheckbox = item => (
    <Checkbox 
    inline 
    value={item} 
    onChange={this.handleCheckboxSelection} 
    checked={this.state.selectAll || this.state.positionChecked.some(i => i === item)} 
    key={'position'} 
    type={'checkbox'}> 
    {item} 
    </Checkbox> 
); 

这将使checked属性上的物品是否存在的positionChecked阵列或者不真或假的依赖。

编辑：此外，为了这个工作，你就必须取消选择“全选”复选框（或更好，迫使其取消任何单个复选框是选中手动）。

EDIT2：你也应该考虑改变你处理的“全选”复选框的方式。应该添加/删除positionChecked阵列中的所有项目，而不是设置单个布尔值。

EDIT3：处理“全选”不同

如果你打破了这两个复选框类型使用情况下（“全选”对个体选择），我说你要达到以下行为：

• 检查“全选”检查所有单个复选框
• 取消选中“全选”取消选中所有单个复选框
• 检查个体箱只检查那个盒子并留下其他不变
• 取消选中个人框取消选中“全选”，如果它是检查

这是你最初定义它，我会怎么定义这两个处理器来实现这一点，使用状态：

handleCheckboxSelection(e) { 
    const item = e.target.value; 
    const positionChecked = this.state.positionChecked.some(i => i === item) ? this.state.positionChecked.filter(i => i === item) : [ ...this.state.positionChecked, item ]; 
    this.setState({ selectAll: false, positionChecked },() => console.log(this.state)); 
}; 

handleSelectAll(e) { 
    const selectAll = e.target.checked; 
    const positionChecked = selectAll ? items : []; 
    this.setState({ selectAll, positionChecked },() => console.log(this.state)); 
}; 

单个复选框处理程序获取正在选中/未选中的项目。如果该项目是目前this.state.positionChecked数组中，则返回一个新的数组，其中该项目被过滤掉，如果它不存在，如该项目被添加到现有的阵列将返回一个新的数组。然后，状态设置与此阵出新，selectAll设置为false（如果this.state.selectAll已经false，我们要离开这种方式，如果它是true我们要设置它false，见上使用情况;将其设置为false涵盖两种情况）。

“全选”的处理程序是非常简单的。我们设置selectAll，以反映该复选框的选中状态，如果它被选中，我们设置了positionChecked阵列包含所有项目，如果不加制止，我们设置阵列是完全空的（再次，见用例以上）。

最后，他这样做了，你可以在你createCheckbox方法checked价值简化为以下几点：

checked={this.state.positionChecked.some(i => i === item)}