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'));

我在jsbin上也有这段代码

http://jsbin.com/fusoxos/edit?js,console,output

最佳答案

我建议使用不可变集而不是列表。这使您可以纯粹处理值，而不用弄乱索引。

您最初的问题是，无论列表是什么，您都在pop列表中的最后一项。您还使用has而不是值来检查列表的索引。

构造函数：

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

handleChange：

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

渲染：

checked={checked.includes(key)}

和

  { checked.contains(0) ? 'Checked' : 'Unchecked'}

我forked您的JSBin。

关于javascript - 我如何使用不可变js选中和取消选中输入复选框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41279530/