文本框我需要在KeyDown，MouseUp和onChange上使用所有这些方法

Question

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

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 语句来筛选出所有不需要的事件触发器。