regex 如何让react中的输入只接受0和1之间的浮点数？

ewm0tg9j 于 2023-08-08 发布在 React

关注(0)|答案(1)|浏览(96)

我有一个文本输入，我希望它只接受0和1之间的浮点数。

const Page = () => {

//previous states ...
const [currentElectricityPrice, setCurrentElectricityPrice] = useState(0.0);

 const onCurrentElectricityPriceChange = (
    event: SyntheticEvent<HTMLInputElement>
  ) => {
    const { value } = event.currentTarget;
    if (validateFloat(value)) setCurrentElectricityPrice(parseFloat(value));
  };
return (

<>
...
         <TextField
                ID=""
                placeholder=""
                value={currentElectricityPrice}
                onChange={onCurrentElectricityPriceChange}
                outline
                unit="€/kWh"
                step={0.01}
              />
}

字符串
float验证正则表达式：

export const validateFloat = (value: string) => {
  const pattern = /^(0(\.\d+)?|1(\.0+)?)$/;
  return pattern.test(value);
};

型
问题是它只允许0（原始状态）。
我的限制是：

000.00（错误）
111（错误）
0.1111（正常）
1（好的）
1.0（错误）
CodeSandbox
谢谢你。

regex

来源：https://stackoverflow.com/questions/76746267/how-to-let-the-input-in-react-accepts-only-float-number-between-0-and-1

1条答案

按热度按时间

cidc1ykv1#

您可以在<input type="number">上使用.setCustomValidity()和.reportValidity()验证value，而不是阻止用户输入（这可能被认为是糟糕的UX）：

const handler = (event) => {
  const inputElement = event.target
  const value = Number(inputElement.value);
  const isValid = 0 <= value && value <= 1;

  if (!isValid) {
    inputElement.setCustomValidity('Input must be in range [0, 1]')
    inputElement.reportValidity();
  } else {
    inputElement.setCustomValidity('');
  }
};

字符串
<input type="number">使您不必过滤掉非数字输入，即使它可能接受比您预期的更多的输入（例如，1e3是有效的）。这就是.setCustomValidity()/.reportValidity()的用武之地：它会显示一个漂亮的、基于浏览器的通知，让用户知道他们的输入是无效的。
注意<input>的step="any";它允许任意精度的十进制数。
试试看：

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

function App() {
  const handler = (event) => {
    const inputElement = event.target
    const value = Number(inputElement.value);
    const isValid = 0 <= value && value <= 1;

    if (!isValid) {
      console.log({ value, isValid });
      inputElement.setCustomValidity('Input must be in range [0, 1]')
      inputElement.reportValidity();
    } else {
      inputElement.setCustomValidity('');
    }
  };
  
  return (
    <div className="App">
      <input type="number" step="any" onInput={handler} />
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

的数据

赞(0）回复(0）举报 2023-08-08

我来回答

regex 如何让react中的输入只接受0和1之间的浮点数？

1条答案

相关问题

热门标签

最新问答