处理 React 数字输入中的点击和按键不起作用

Posted 2023-02-22

【中文标题】处理 React 数字输入中的点击和按键不起作用

【英文标题】：Handling both clicks and keypresses in React number input not working

【发布时间】：2021-04-28 00:37:17

【问题描述】：

我在下面有一些 React 代码的一部分，我有一个数字输入，我想防止人们能够点击 0 以下，我已经用 min 属性完成了。但是我已经看到仍然可以手动键入负数。经过一番谷歌搜索后，我发现人们可以通过 keyPress 检查并查看字符代码来处理这个问题，但由于某种原因，我无法让它正常工作。

两个处理程序是否相互冲突？我的目标是允许点击增量对正数起作用，并防止在输入中允许负数和小数。

这是一个受控输入，其中值来自状态。

const handleChange = (e) => 
    console.log(e.target.value);
    setCount(e.target.value);
  ;

  const handleKeyPress = (e) => 
    console.log(e.target.value);
    console.log(e.charCode);
    if (e.charCode >= 48 && e.charCode <= 57) 
      setCount(e.target.value);
    
  ;

  return (
    <section>
      <h3>Input test</h3>
      <form onSubmit=handleSubmit>
        <label htmlFor="amount">paragraphs:</label>
        <input
          type="number"
          name="amount"
          id="amount"
          min="0"
          value=count
          onKeyPress=handleKeyPress
          onChange=handleChange
        />

【参考方案1】：

您可以在 handleChange 函数中将值格式化为绝对整数，它会在重新渲染时删除零和小数分隔符：

const handleChange = (e) => 
  setCount(Math.abs(parseInt(e.target.value)));
;

或者，如果您绝对想阻止“0”和“.”要输入的字符，您可以在 handleKeyPress 函数中使用 preventDefault：

const handleKeyPress = (e) => 
  if (e.charCode === 45 || e.charCode === 46) 
    return e.preventDefault()
  
;

【讨论】：

如果可能的话，我想限制通过按键输入的负数或十进制数。我可以同时使用这两个处理程序，即 onChange 和 onKeyPress 还是它们最终会发生冲突？

我知道 preventDefault 可以停止页面刷新，但它在 keyPress 上是如何工作的？你能解释一下吗？

preventDefault 防止页面在与“提交”一起使用时刷新，这通常是表单元素的默认事件类型。在这种情况下，当它与“keyPress”一起使用时，它会阻止另一个为特定键启动文本合成系统的操作。

文本合成系统是什么意思？我不明白。

也可以在同一个输入上使用不同的处理程序吗？例如onChange 和 onKeyPress？

【参考方案2】：

在这种情况下，您只想将onKeyPress 用作验证器。如果验证失败，您可以致电e.preventDefault()。这样可以防止触发onChange:

  const handleKeyPress = (e) => 
    if (e.charCode >= 48 && e.charCode <= 57) return
    e.preventDefault()
  ;