时间戳

首页 > 解决方案 > 处理 React 数字输入中的点击和按键不起作用

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

问题描述

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

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

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

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}
        />

标签： javascriptreactjsinputstate

解决方案

您可以在 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()
  }
};

推荐阅读