主页 / 问题 / 1277639
Accepted
dima
Asked:2022-05-03 19:36:55 +0000 UTC2022-05-03 19:36:55 +0000 UTC

如何为输入类型号 React/JSX 设置最大值和最小值？

  • 772

事实是，在数字标签中，我指出了最小值和最大值的值\u200b\u200b。如果你用箭头改变数字，那么一切正常，但如果你从键盘输入一个数字，你可以自由输入一个小于最小值和大于最大值的数字。

<input type="number" placeholder="LVL" className="text-area-minimal" min="0" max="999"></input>
javascript

1 个回答

  1. Best Answer

    如果我不是太懒，我会添加第二个选项。

    代码沙盒

    export default function App() {
  const [val, setVal] = useState(0);

  const setNumber = ({ target }) => {
    let { value, min, max } = target;
    value = Math.max(Number(min), Math.min(Number(max), Number(value)));

    setVal(value);
  };
  return (
    <div className="App">
      <input type="number" onChange={setNumber} value={val} min="0" max="10" />
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
    • 0

相关问题