React 输入验证：如何限制数字范围？

javascript

2024-03-05 05:44:57

React 中的输入验证：确保数字在范围内

简介

在 React 应用程序中，验证用户输入对于确保数据的有效性、防止错误并增强用户体验至关重要。本文重点介绍一种在 React 中验证用户输入数字是否在指定最小值和最大值之间的技术。

需求

假设我们有一个文本输入框，要求用户输入数字作为特定服务的费用。为了避免超出范围的错误和确保数据完整性，我们需要限制用户输入的数字介于最小值（例如 100 美元）和最大值（例如 200 美元）之间。

解决方案：分步指南

1. 获取最小值和最大值

从父组件或其他来源获取 minCost 和 maxCost 变量，表示输入数字的允许范围。

2. 监听输入事件

为文本输入框添加一个 onChange 事件监听器，当用户键入时触发。

3. 解析输入值

从事件对象中获取输入值并将其解析为数字。

4. 限制输入值

使用 Math.max 和 Math.min 函数将输入值限制在 minCost 和 maxCost 之间。这可确保输入值始终处于允许的范围内。

5. 更新状态

将限制后的输入值更新到组件的状态中。这使组件可以访问验证后的数字，并在需要时用于进一步处理或显示。

代码示例

import React, { useState } from "react";

const App = () => {
  const minCost = 100;
  const maxCost = 200;

  const [tripCoverage, setTripCoverage] = useState(0);

  const handleInputChange = (e) => {
    const value = Number(e.target.value);
    const result = Math.max(minCost, Math.min(maxCost, value));
    setTripCoverage(result);
  };

  return (
    <input
      type="number"
      value={tripCoverage}
      onChange={handleInputChange}
    />
  );
};

export default App;