Javascript 如何使用不可变js选中和取消选中输入复选框

我正在尝试用reactjs学习immutablejs。我有一个项目列表，每个项目都有一个复选框。我想要的功能，如当复选框被点击时，应显示复选标记和一些文本，如选中。我试过了，但当我选中第一个复选框时，第二个复选框被选中

这是我的代码

class AddRemoveCheckbox extends React.Component{
  constructor(){
    super();
    this.state = {
      checked: Immutable.List([])
    }
  }

  handleChange(e, key) {
    console.log('key', key);
    const { checked } = this.state;
    if (e.target.checked) {
      this.setState({
        checked: checked.push(key)
      })
    } else {
      this.setState({ 
        checked: checked.pop(key)
      })
    }
  }

  render() {
    console.log('items');
    const { checked } = this.state;
    console.log('checked', checked.has('0'));
    const items = this.props.items.map((item,key) => {
      return (
        <li key={key} style={{ listStyle: 'none' }}>
        <input 
          type="checkbox" 
          checked={checked.has(key)}
          onChange={(e)=>this.handleChange(e, key)} 
        />
        {item}
        </li>
        )
    })
    return (
      <div>
      Items:
      {items}
      { checked.has('0') ? 'Checked' : 'Unchecked'}
      </div>
    );
  }
}

ReactDOM.render(<AddRemoveCheckbox items={['item1', 'item2'] } />, document.getElementById('root'));

类AddRemoveCheckbox扩展React.Component{ 构造函数（）{ 超级（）； 此.state={ 选中：不可变。列表（[]） } } 手柄更换（e，钥匙）{ console.log（'key'，key）； const{checked}=this.state； 如果（例如，选中目标）{ 这是我的国家({ 选中：选中。按（键） }) }否则{ 这个.setState（{ 选中：选中。弹出（键） }) } } render（）{ console.log（'items'）； const{checked}=this.state； console.log（'checked'，checked.has（'0'）； const items=this.props.items.map（（项，键）=>{ 返回(

this.handleChange（e，key）} /> {item}

) }) 返回( 项目： {items} {checked.has（'0'）？'checked'：'Unchecked'} ); } }

---

render（

我建议使用一个不可变的集合而不是列表。这使您可以纯粹处理值，而不是混淆索引

您最初的问题是，您正在

pop

ing列表中的最后一项，不管它是什么。您还使用

has

而不是值检查列表的索引

建造商：

this.state = {
  checked: Immutable.Set()
}

手柄更换：

if (e.target.checked) {
  this.setState({
    checked: checked.add(key)
  })
} else {
  this.setState({ 
    checked: checked.remove(key)
  })
}

呈现：

checked={checked.includes(key)}

及

---

我建议使用一个不可变的集合而不是列表。这样，您就可以纯粹处理值，而不是处理索引

您最初的问题是，您正在

pop

ing列表中的最后一项，不管它是什么。您还使用

has

而不是值检查列表的索引

建造商：

this.state = {
  checked: Immutable.Set()
}

手柄更换：

if (e.target.checked) {
  this.setState({
    checked: checked.add(key)
  })
} else {
  this.setState({ 
    checked: checked.remove(key)
  })
}

呈现：

checked={checked.includes(key)}

及

---

我需要您的JSBin。

谢谢您的帮助，但选中后文本不会更改。啊，还有一行代码需要更改。我尝试了包含（0）但是这只起作用第一个复选框被选中。如果第二个复选框被选中，我不会得到选中的文本。你想对选中的文本做什么？如果其中任何一个被选中，则打印？然后你可以只检查集的大小。谢谢，我得到了它。我想在选中任何一个时显示选中。我使用checked.size>0进行了此操作。你能看到吗相同的问题但不同的问题？感谢您的帮助，但选中时文本不会更改。啊，还有一行代码需要更改。我尝试了包含（0）但是这只起作用第一个复选框被选中。如果第二个复选框被选中，我不会得到选中的文本。你想对选中的文本做什么？如果其中任何一个被选中，则打印？然后你可以只检查集的大小。谢谢，我得到了它。我想在选中任何一个时显示选中。我使用checked.size>0进行了此操作。你能看到吗相同的问题，但不同的问题？