Question

我正在学习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到该特定项目的正确方法是什么？

Answer 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]);
 },

Answer 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})
 },

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

2 个答案: