reactjs - 按下键onKeyDown Reactjs时删除输入中的内容

Question

当我尝试在按下特定键后立即删除输入中的内容时，在这种情况下，它是带有 onKeyDown 的字母“t”，输入将被清除，但按下的键将保留在输入中，例如：当我在输入中键入“排序”，结果将是“t”。“t”将保留在输入值内，但我希望清除输入值，尽管当我按下字母“t”时我将“term”的状态设置为“”

  state = { term: ""};

  keyListener = (e) => {
    if (e.key === "t") {
      this.setState({ term: "" });
    }
  };

  onInputChange = (event) => {
    this.setState({ term: event.target.value });
  };

  render() {
    return (
      <div className="search-bar ui segment">
        <form className="ui form">
          <div className="field">
            <label>Search Video</label>
            <input
              type="text"
              value={this.state.term}
              onChange={this.onInputChange}
              onKeyDown={this.keyListener}
            />
          </div>
        </form>
      </div>
    );
  }

标签： reactjsreact-nativereact-redux

Answer 1

发生这种情况是因为接下来将调用 onInputChange，只需调用 e.preventDefault 来防止：

keyListener = (e) => {
    if (e.key === "t") {
      this.setState({ term: "" });
      e.preventDefault();
    }
  };