javascript - 文本框我需要使用所有这些方法 onKeyDown、onMouseUp 和 onChange

Question

• 在我的文本框中，我需要使用所有这些方法 onKeyDown、onMouseUp 和 onChange。
• 当我尝试在我的文本框中选择文本时，onMouseUp 事件正在调用，
• 选择后，如果我删除其调用 onChange 方法。
• 是否可以避免，因为选择和删除该文本我需要调用另一个 api fetchSearch
• 我通过放置控制台进行了调试，但仍然没有成功
• 你能告诉我如何解决吗？
• 在下面提供我的代码片段和下面的沙箱
• 我所有的代码都存在于容器文件夹中的 Button.js 中

https://codesandbox.io/s/loving-moon-0h0fm

const onKeyDown = e => {
    console.log("e.keyCode", e.keyCode);

    if (e.keyCode === 8) {
      console.log("delete---->", e.target.value);
      getPosts(channel);
      if (e.target.value === "") {
        console.log("onKeyDown delete empty value--->", e.target.value);
        fetchSearch(channel);
      }
    }
  };
  const onMouseUp = e => {
    console.log("onMouseUp e.keyCode", e.keyCode);
    if (e.target.value === "") {
      console.log("onMouseUp delete empty value--->", e.target.value);
      fetchSearch(channel);
    }
  };

  return (
    <div>
      {/* <button
        onClick={() => {
          getPosts(channel);
          getAlert();
        }}
        className="btn btn-primary btn-lg btn-block"
      >
        Get top news
      </button> */}
      <InputBase
        // className={classes.input}
        placeholder="Search Google Maps"
        inputProps={{ "aria-label": "Search Google Maps" }}
        onChange={e => {
          console.log("onChange e.target.value--->", e.target.value);
          getPosts(channel);
        }}
        onKeyDown={() => {
          // getPosts(channel);
          onKeyDown();
        }}
        onMouseUp={() => {
          // getPosts(channel);
          onMouseUp();
        }}

        //onKeyDown={onKeyDown}
        //   onMouseUp={this.onMouseUp}
      />
    </div>
  );

Answer 1

要忽略 onChange 方法中的删除键按下，您可以将以下内容添加到 onChange 方法的第一行:

if(e.target.value == '') return

如果文本框为空(例如，用户刚刚按下删除)，您的 onChange 方法现在将不执行任何操作

同样，您可以过滤掉从 onMouseUp 事件中选择文本的情况，例如:

if(window.getSelection().toString().length > 0) return

您可以使用类似的 if 语句来过滤掉所有不需要的事件触发器。