Удалить элемент списка 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

Вам нужно установить this в .map так как this относится к глобальной области, а не к ToDoList объект,

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

Answer 2

Вы должны попробовать приведенный ниже код как:

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 3

Если вы используете ES6 - вы можете использовать функции Arrow для лексического связывания. Кроме того, лучший способ справиться с добавлением / обновлением / удалением элементов в вашем списке - использовать помощников по неизменяемости, предоставляемых React.

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

Answer 4

Контекст this внутри map функция не ссылается на класс React. Для того, чтобы ссылаться на класс React, используя this внутри функции карты, пройти this к функции карты:

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