删除列表项目ReactJS

我已经设法使用ReactJS创建一个列表，在其中键入内容并将其添加到文本框下方的列表中。但是，我现在希望用户能够从该列表中删除某些内容。删除列表项目ReactJS

下面是一些代码：

var ToDoList = React.createClass({ 

    deleteItem: function(item){ 
    var items = this.state.items.filter(function(itm) { 
     return item.id !== itm.id; 
    }) 
    }, 

    render: function() { 
    var DeleteClick=this.deleteItem;   
    var listItems = this.props.listItems.map(function(submittedValue) { 
     return (
      <ToDoListItem key={submittedValue.id}>{submittedValue.text}<button onClick={DeleteClick}> X </button></ToDoListItem> 

    ) 
    }); 
    return (
     <ul className="toDoList"> 
      {listItems} 

     </ul> 
    ); 
    } 
});

此代码生成此错误消息：Uncaught TypeError: Cannot read property 'deleteItem' of undefined

下面是一些更多的代码，我怎么我产生添加到列表：

var i = 1; 
var ToDoForm = React.createClass({ 

    getInitialState: function() { 
    return {text: '', submittedValues: [{id: '000001', text: 'Rich'}, {id: '000002', text: 'Simon'}]}; 
    }, 
    handleChange: function(event) { 
    this.setState({text: event.target.value}); 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 

    var submittedValue = {text: this.state.text, id: i++}; 
    this.setState({submittedValues: this.state.submittedValues.concat(submittedValue)}); 
    this.setState({text: ''}); 
    console.log("ToDo: " + this.state.submittedValues); 
    }, 

    render: function() { 

    return (
     <div> 
      <h1> todos </h1> 

      <form className="todoForm" onSubmit={this.handleSubmit}> 
      <input 
       type="text" 
       placeholder="Type out a task" 
       value={this.state.text} 
       onChange={this.handleChange} 
       /> 
      <input 
       type="submit" 
       value="Submit todo" 
       /> 
      </form> 

      <h2> Data should appear here </h2> 

      <ToDoList listItems={this.state.submittedValues}/> 
     </div> 
    ); 
    } 
});

不知道如何让删除工作

来源

2015-11-25 The Hurricane

您需要设置this到.map因为this是指全球范围内不ToDoList对象，

var listItems = this.props.listItems.map(function(submittedValue) { 
    // your code 
}, this);

来源

2015-11-25 14:08:42

需要在deleteItem函数中进行什么？ –

@The Hurricane能否澄清你的意思 –

当然。我已经编辑了上面的代码，以反映我的代码的外观，包括您的更改。目前当我点击我的按钮时什么也没有发生，当我想要的是它删除该特定项目。在我的deleteItem函数中一定是错误的，但我无法解决它。你能看到任何错误吗？ –

你要尽量下面提到代码：

var DeleteClick=this.deleteItem; 
var listItems = this.props.listItems.map(function(submittedValue) { 
    return (
     <ToDoListItem key={submittedValue.id}>{submittedValue.text}<button onClick={DeleteClick}> X </button></ToDoListItem> 

) 
});

您使用的地图功能this关键字，这个范围是有限的映射功能只的Y它造成的概率

来源

2015-11-25 14:07:56

'提供Immutability helpers不能读取属性的项目的null'是错误大概是因为项目变量无关，在它 –

@TheHurricane：是的，因为你还没有在你的ToDoList组件中设置状态 –

那么应该在那个删除函数中呢？ –

的内的的this背景函数不引用封闭的React类。为了引用阵营使用this映射函数内部类，通过this到地图功能：

var listItems = this.props.listItems.map(fn, this)

来源

2015-11-25 14:09:19

如果你使用ES6 - 您可以使用Arrow functions词法绑定。此外，为了处理增加的最佳方法/更新/在你的列表中删除的项目是使用由React

var listItems = this.props.listItems.map(submittedValue => { 
     <ToDoListItem key={submittedValue.id}>{submittedValue.text}<button onClick={this.deleteItem}> X </button></ToDoListItem> 
});

来源

2015-11-25 14:16:36

删除列表项目ReactJS

回答

相关问题