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>

如何在ReactJS中验证数字输入

1 个答案: