作出反應 - 不能單獨選擇一個複選框選中後，他們都使用「全選」複選框

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