删除列表项 ReactJS

Question

我已经设法使用 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>
    );
  }
});

不确定如何让删除生效

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>

  )
});

您在 map 函数中使用了 this 关键字，并且其范围仅限于 map 函数，这是导致问题的原因

Answer 2

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

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

Answer 3

map 函数中 this 的上下文未引用封闭的 React class。为了在 map 函数中使用 this 引用 React class，将 this 传递给 map 函数：

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

Answer 4

如果您使用 ES6 - you can use Arrow functions 进行词法绑定。此外，处理列表中 adding/updating/deleting 项的最佳方法是使用 Immutability helpers provided by React

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

删除列表项 ReactJS

Delete list item ReactJS

javascript

html-lists

reactjs

react-jsx