Reactjs 根据检查的输入更改对象属性的状态答案

【问题标题】：Reactjs change the state of an object's property based on checked inputReactjs 根据检查的输入更改对象属性的状态
【发布时间】：2017-05-15 14:02:35
【问题描述】：

我正在学习 React，并且正在构建一个简单的待办事项列表。我的initialState 中有这个对象

 getInitialState:function(){
    return {
        items: [
            {
                text:"Buy Fish",
                key: "1",
                done: 0
            }
            ]
        }
 },

我的 TodoList 组件有这个地图功能

var listItem = this.props.items.map((item, index)=>{
        return <li key={item.key}> <input type="checkbox" onChange={(e)=>{this.props.onChange(item.key, e)}} /> <span onClick={()=>{this.props.editItem(item.text)}}>{item.text}</span> <button onClick={()=>this.props.removeItem(item.key)}>x</button> </li>
    });

现在我想点击复选框并将属性done的状态更改为1。

onChange 属性指向一个函数

  itemDone:function(index, e){
  var myArray = this.state.items;
  var a = e.target.checked;
  console.log(index);
},

将值从 0 更改为 1 到该特定项目的正确方法是什么？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以将索引传递给您的 onChange 方法。

var listItem = this.props.items.map((item,index)=>{
            return <li key={item.key}> <input type="checkbox" onChange={(e)=>this.props.onChange(index,e)} /> <span onClick={()=>{this.props.editItem(item.text)}}>{item.text}</span> <button onClick={()=>this.props.removeItem(item.key)}>x</button> </li>
        });

并使用和index获取特定项目：

itemDone:function(index,e){
    var myArray = this.state.items;
    var a = e.target.checked;
    console.log('item': this.state.items[index]);
 },

【讨论】：

【解决方案2】：

传递索引，然后编辑同一个对象。还可以使用spread operator 创建项目数组的新对象实例，否则myArray 将引用不可变对象状态项本身。

var listItem = this.props.items.map((item, index)=>{
            return <li key={item.key}> <input type="checkbox" onChange={()=>this.props.onChange(index)} /> <span onClick={()=>{this.props.editItem(item.text)}}>{item.text}</span> <button onClick={()=>this.props.removeItem(item.key)}>x</button> </li>
        });


itemDone:function(index){
    var myArray = [...this.state.items];
    if(myArray[index].done == 0) {
          myArray[index].done = 1; 
    } else {
          myArray[index].done = 0; 
     }
    this.setState({items: myArray})
 },

【讨论】：