Когда ввод пуст, последний чип должен быть удален при нажатии Backspace

Question

Когда вход пуст и пользователь нажимает кнопку удаления, последний чип следует удалить.Вы можете найти ссылку ниже, чтобы получить четкую картину.

https://codesandbox.io/s/thirsty-glade-my5xk

Любая помощь будет оценена.

Я пробовал функцию onKeyUp, но онане то решение, которое мне нужно.

// отображение фишек

{this.state.emails.map(email => (
  <div key={email}>
    {email}

    <button
      type="button"
      onClick={() =>  this.handleDelete(email)}
    >
      &times;
    </button>
  </div>
))}    

// поле ввода

<input
  placeholder="Type or paste email addresses and press `Enter`"
  value={this.state.value}
  onChange={this.handleChange}
  onKeyDown={this.handleKeyDown}
/>

// Удаление обработчика событий

handleDelete = (toBeRemoved) => {
  this.setState({
    emails: this.state.emails.filter(email => email !== toBeRemoved)
  });
};

Answer 1

Вы можете удалить свой handlekeyUp и обработать клавишу возврата в вашем обработчике handleKeyDown следующим образом:

handleKeyDown = evt => {

  if (["Enter", ",", "Backspace"].includes(evt.key)) {
    evt.preventDefault();

    if (evt.key === "Backspace") {
      // Remove last email
      this.setState({
        emails: this.state.emails.slice(0, -1);
      })

      return;
    }

    var email = this.state.value.trim();

    if (email) {
      this.setState({
        emails: [...this.state.emails, email],
        value: ""
      });
    }
  }
};

Answer 2

if (evt.key === "Backspace" && this.state.value === "") {
  evt.preventDefault();
  let emails = this.state.emails
  if (emails.length > 0) {
    emails.pop()
    return this.setState({emails})
  }
}

Это должно проверить, если значение пусто и evt.key равно Backspace, затем удалить последний элемент из массива emails.