如何在ReactJS中验证数字输入

Question

在 Django 中，您可以轻松使用 MinValueValidator 和 MaxValueValidator 来验证 IntergerFields。
它们在 ReactJS 中的对应项是什么？

我在前端有一个表单（用 ReactJS 构建），其中多个字段是 type=number 字段，并且数字需要适合特定的值范围，即大于 0，小于 250。

在后端，我通过使用 Min/Max ValueValidator 实现了对数字输入的控制。我应该在 ReactJS 前端做什么？

谢谢！

Answer 1

您仍然可以使用

min

的

max

和

input

属性，但可以使用一些自定义逻辑来检查

input

值是否超出该区间。

示例

class App extends React.Component {
  state = { value: 0 };

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

    this.setState({ value });
  };

  render() {
    return (
      <input
        value={this.state.value}
        onChange={this.handleChange}
        type="number"
        min="1"
        max="250"
      />
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

这是因为 onChange 函数期望它是数字。当您输入退格键时，该字段变为空白，这不是有效的数字，并且它尝试使用空白值调用 onChange，这就是您无法编辑它的原因