在 React 中设置输入类型数字长度限制的最有效方法

Question

我有 3 个输入供用户输入一些最终成为日期格式的值

对于我的输入 'day' 和 'month' 我希望用户输入 2 个整数，不要更多对于我的输入 'year' 我希望用户输入 4 个整数。

最好的方法是什么？

        <input
          name="month"
          value={values.dateOfBirth.month}
          onChange={(e) => handleDateChange(e)}
          type="number"
          placeholder={"MM"}
          className={dateErr ? "error" : ""}
        />
        <br />
        <input
          name="day"
          value={values.dateOfBirth.day}
          onChange={(e) => handleDateChange(e)}
          type="number"
          placeholder={"DD"}
          className={dateErr ? "error" : ""}
        />
        <br />
        <input
          name="year"
          value={values.dateOfBirth.year}
          onChange={(e) => handleDateChange(e)}
          type="number"
          placeholder={"YYYY"}
          className={dateErr ? "error" : ""}
        />

Answer 1

试试这个

您可以使用简单的 regex 来只允许一位或两位数字。但您也可以添加许多限制。

import { useState } from "react";

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

  const handleDateChange = (e) => {
    const currentValue = e.target.value;
    if (currentValue === "") {
      setValue(currentValue);
    } else if (/^\d{1,2}$/.test(currentValue)) {
      setValue(currentValue);
    }
  };

  return (
    <div className="App">
      <input type="text" value={value} onChange={handleDateChange} />
    </div>
  );
}

代码沙箱 => https://codesandbox.io/s/mystifying-browser-0ry45?file=/src/App.js

Answer 2

 <input
            name="month"
            value={values.dateOfBirth.month}
            onChange={(e) => {
                if(e.target.value.length <3){
                    handleDateChange(e)
                }else {
                    e.target.value=  e.target.value.slice(0,2)
                }
            }}
            type="number"
            placeholder={"MM"}
            className={dateErr ? "error" : ""}
        />

对我来说效果很好。

在 React 中设置输入类型数字长度限制的最有效方法

most efficient way to set length restrictions on input type number in React

forms

input

reactjs