Question

我有一个类型为text的输入框，我只想输入数字，并且反应中的最大长度不应超过6。请给出一些参考。

Answer 1

您可以使用正则表达式和简单的.length验证。这是一个例子：

class Example extends React.Component {
  constructor() {
    super();
    this.state = { number: '' };
  }
  handleChange(e) {
    const val = e.target.value;
    if (val.length <= 6 && /^(\s*|\d+)$/.test(val)) {
      this.setState({
        number: val
      });
    }
  }
  render() {
    return(
      <input onChange={this.handleChange.bind(this)} value={this.state.number} />
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));

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

您也可以使用HTML5验证，但它只会在提交时进行检查：

<form>
  <input type="number" max="999999" />
  <input type="submit" />
</form>

如何在React中使用数字验证输入类型文本？

1 个答案: