当输入为空白时，应按退格键删除最后一个筹码

Question

当输入为空且用户按下删除按钮时，应删除最后一个筹码。您可以找到下面的沙盒link，可以提供清晰的画面。

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

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 是否为退格键，然后从电子邮件数组中删除最后一项。

Answer 2

您可以删除 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: ""
      });
    }
  }
};

当输入为空白时，应按退格键删除最后一个筹码

When the input is blank the last chip should be deleted on pressing Backspace

reactjs

eventhandler