停止传播所有事件答案

【问题标题】：Stop propagation of all events停止传播所有事件
【发布时间】：2021-03-22 14:52:47
【问题描述】：

我正在尝试处理用户的退格键按下。我有 2 个处理程序绑定到一个输入元素。由于无法在 onChange 事件处理程序中检测到按键，因此我必须在 onKeyDown 中进行。我想在按下退格键时停止 onChange 事件的传播（并在 onKeyDown 事件处理程序中处理）。任何想法如何实现这一目标？谢谢！

【问题讨论】：

event.preventDefault() 和 event.stopPropagation()?
这不会停止 onChange 事件。
啊，现在我明白了。不，你不能这样做
你能添加一个具体的minimal reproducible example吗？
是否有可能以完全不同的方式实现它？就像使用状态一样。但我不相信，因为状态设置是异步的..

标签： javascript reactjs events

【解决方案1】：

If you has Select Option: When you click on select tag, onChange and onClick event is fired. I solved this by creating a onClick handler side onChange handle and then calling e.stopPropogation().

<select onClick ="St(event)" onChange ="Tc(event)" >
     <option>Case</option>
</select>

St(event) {
  event.stopPropagation();
  console.log('Next');
}

Tc(event) {
  event.stopPropagation();
  console.log('Nex here');
}

【讨论】：

【解决方案2】：

如果您试图防止退格，您可以将输入的值存储在 state 中并将其作为 prop 传递给输入，并在输入的 onChange 中将 e.target.value 与存储在 state 中的值进行比较并更新状态变量

     
  const [value, setValue] = useState("");

  const checkValue = (newValue) => {
    if (value.length < newValue.length) setValue(newValue);
  }; 
    
  <input value={value} onChange={(e) => checkValue(e.target.value)} />

【讨论】：

【解决方案3】：

因为我认为可以以这种方式做到这一点。您可以创建一些辅助变量/属性并在 onKeyDown 处理程序中将 keyCode 设置为它。然后你可以在任何你想要的地方有条件地使用它（对我来说，在 onChange 事件处理程序中）。

【讨论】：