Question

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

以下是一些代码：

<div>Lorem ipsum sit amet</div>

此代码生成此错误消息：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

不确定如何让删除工作

Answer 1

你必须尝试下面提到的代码：

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关键字，并且这个范围仅限于映射函数，因为它导致了问题

Answer 2

您需要将this设置为.map，因为this指的是全局范围而不是ToDoList对象，

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

Answer 3

this函数中map的上下文不引用封闭的React类。要在map函数中使用this引用React类，请将this传递给map函数：

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

Answer 4

如果您使用的是ES6，则可以使用Arrow functions进行词法绑定。此外，处理列表中添加/更新/删除项目的最佳方法是使用Immutability helpers提供的React

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

删除列表项ReactJS

4 个答案: