単品のチェックを外してチェックすることができません

Question

私はチェックボックスの付いた商品のリストを持っています。アイテムのチェックボックスがクリックされると、そのアイテムにそのアクションを適用するための特定のアクション（追加、削除、移動など）が表示されます。また、私はすべての項目をチェックし、それもチェックを外すためにすべてのチェックを実装することができます。しかし、私が1つのアイテムをチェックすると、すべてのアイテムがチェックされ、チェックを外すと同じアイテムがチェックされます。

はここ@Jonnyブキャナンから更新されたコードと私のコード

var Device = React.createClass({ 
    getInitialState() { 
     return { 
     checked: [] 
     } 
    }, 

    handleChange(e, key) { 
     let checked = this.state.checked.slice(); 
     if (e.target.checked) { 
     checked.push(key); 
     console.log('checked before removing', checked); 
     } 
     else { 
     checked.splice(checked.indexOf(key), 1); 
     console.log('checked after removing', checked); 
     // checked.filter((x, i) => checked.splice(checked.indexOf(key), 1)); 
     } 
     this.setState({ checked: checked }); 
    }, 

    checkAll() { 
     this.setState({ 
     checked: this.props.devices.entrySeq().map(([key, value]) => key) 
     }).toArray(); 
    }, 

    uncheckAll() { 
     this.setState({ checked: [] }); 
    }, 

    render() { 
     const { checked } = this.state; 
     let devices = this.props.devices.entrySeq().map(([key, value]) => { 
     let url = '/device/'+value.get('id'); 
     let name = value.get('name'); 
     return (
      <RowGroup key={key}> 
       <Row> 
       <Cell> 
        <input 
        type="checkbox" 
        name={name} 
        checked={checked.indexOf(key) !== -1} 
        onChange={(e) => this.handleChange(e, key)} 
        /> 
       </Cell> 
       <RouterLink to={url}> 
        <Cell> 
        {name} 
        </Cell> 
       </RouterLink> 
       </Row> 
     </RowGroup> 
     ); 
     }).toArray(); 

     return (
     <div> 
      { checked.length !== 0 ? <DeviceActions uncheckAll={() => this.uncheckAll()} /> : 
      <GlobalDeviceActions 
       checkAll={() => this.checkAll()} 
       uncheckAll={() => this.uncheckAll()} 
      /> 
      } 
     <Table> 
      {devices} 
     </Table> 
     </div> 
    ); 
    }, 
}); 

const mapDispatchToProps = function(dispatch) { 
    return {}; 
} 

const mapStateToProps = createStructuredSelector({ 
    devices: selectDevices() 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(Device); 


const DeviceActions = (props) => (
    <div> 
    <Actions> 
     <Uncheck onClick={props.uncheckAll} /> 
     <Add /> 
     <Move /> 
    </Actions> 
    </div> 
); 

export const GlobalDeviceActions = (props) => (
    <div> 
    <Actions> 
     <Check onClick={props.checkAll} /> 
     <Uncheck onClick={props.uncheckAll} /> 
    </Actions> 
    </div> 
); 

export default DeviceActions; 

で、すべてが正常に機能していますが、すべての項目を一度にチェックされたとき、私は単一の項目のチェックを外すことはできません。私はただ一度にアイテム全体のチェックを外すことができます。

UPDATE

それが今取り組んでいます。 checkAll関数では、配列をコレクションに変換する必要があります。私は、そのコレクションはすぐに実行されないので、私は配列にそれを変更する必要があるジェネレータであると思います。

Answer 1

チェックされたアイテムのリストを状態に保つと、checkAll()は利用可能なアイテムキー/ ID（またはそのリストに入れるのに最も適切なもの）をすべて設定でき、uncheckAll()は空のリストに設定できます。

getInitialState() { 
    return { 
    checked: [], 
    } 
}, 

handleChange(e, key) { 
    let checked = this.state.checked.slice(); 
    if (e.target.checked) { 
    checked.push(key); 
    } 
    else { 
    checked.splice(checked.indexOf(key), 1); 
    } 
    this.setState({ checked }); 
}, 

checkAll() { 
    this.setState({ 
    checked: this.props.devices.entrySeq().map(([key, value]) => key) 
    }); 
}, 

uncheckAll() { 
    this.setState({ checked: [] }); 
}, 

その後render()であなたがあたり-入力checkedを導き出すことができます。

   <input 
       type="checkbox" 
       name={name} 
       checked={checked.indexOf(key) !== -1} 
       onChange={(e) => this.handleChange(e, key)} 
       />