Question

阅读this answer我想出了这段代码，但是没有用。我想念什么？

function App() {
  const [value, setValue] = useState();

  function onChange(e) {
    const re = /^[0-9\b]+$/;
    if (e.target.value === "" || re.test(e.target.value)) {
      setValue(e.target.value);
    }
  }

  return <input value={value} onChange={onChange} />;
}

render(<App />, document.getElementById("root"));

Answer 1

根据此post

更新的答案

您可以使用属性type="number"和pattern="^-?[0-9]\d*\.?\d*$"，所以请像这样修改输入元素：

  return <input value={value}
                onChange={onChange}
                type="number"
                pattern="^-?[0-9]\d*\.?\d*$"
          />;
}

然后应用以下CSS规则：

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

来源：w3shools

P.S。或者，您可以跳过type=number部分和其他CSS，而只使用模式。

Answer 2

尝试一下。这对我有用。您应该添加属性模式，并在onChange中检查条件。


  const[data, setName] = useState({
    phone:""
  });


function setValue(e){
  if(e.target.validity.valid){
    setName({...data,phone:e.target.value});
  }
  
}

  return (
    <form>
      <label>Numbers Only</label>
      <input name="phone" type ="text" pattern="[0-9]*" value={data.phone} onChange={setValue} />
      <input type="submit" />
    </form> 
  );

Answer 3

一种更简单的方法是将写入的任何内容仅转换为其数字字符。当您将其用作 setValue 调用的参数时，您可以转换该值。

function onChange(e) {
    setValue(e.target.value.split(/\D/).join(''))
}

这将从用户字符串中删除所有非数字字符并防止用户更改状态。它也适用于复制粘贴值，因为它会删除所有出现的非数字字符。

Answer 4

一种方法是使用 type="number"，就像上面的答案一样。

或者您可以使用 pattern 并稍微增强您的实现：

function App() {
  const [value, setValue] = useState();

  function onChange(e) {
    if (!e.target.validity.patternMismatch) {
      setValue(e.target.value);
    }
  }

  return <input value={value || ''} pattern="^[0-9]*$" onChange={onChange} />;
}

render(<App />, document.getElementById("root"));

如何在反应挂钩中仅允许输入数字？

4 个答案: