Как я могу установить флажок и снять флажок с помощью неизменяемых js

Question

Я пытаюсь изучить 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

Я рекомендовал бы использовать Неизменный Set вместо List. Это позволяет вам иметь дело исключительно со значениями вместо того, чтобы возиться с индексами.

Ваш первоначальный выпуск состоял в том, что вы были 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'} 

I forked ваш JSBin.