Question

我正在尝试用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

Answer 1

我建议使用不可变集而不是列表。这可以让你纯粹处理价值而不是搞乱指数。

您的原始问题是您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。

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

1 个答案: