reactjs - 如何在 ReactJS 中验证数字输入

Question

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

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

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

谢谢!

Answer 1

您仍然可以使用 input 的 min 和 max 属性，但可以使用一些自定义逻辑来检查 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>