在没有jQuery的情况下，在达到最大长度值时集中下一个输入，而无需jQuery，并且仅接受数值

Question

我有两个关于反应输入的问题。有什么办法可以使输入一旦达到maxLength时自动使焦点集中在下一个字段上，而无需使用jquery进行反应。

<form>
    <input type="text" maxLength="4" />
    <input type="text" maxLength="4" />
    <input type="text" maxLength="4" />
</form>

第二个问题是当type =“ text”时，如何使输入仅接受数字值？

Answer 1

为此，请使用 onChange 事件处理程序。当用户键入 MAX_LENGTH（4 个字符）时，焦点将设置到下一个元素。React.findDOMNode 获取与 React 组件对应的下一个 DOM 节点。DOM 节点上的 focus 方法设置焦点。

handleTextChange(e) {
  if (e.target.value.length <= MAX_LENGTH) {
    this.setState({ value: e.target.value });
  }
  if (e.target.value.length === MAX_LENGTH) {
    React.findDOMNode(this.nextComponent).focus();
  }
}

组件 JSX 是：

<input value={this.state.value} onChange={this.handleTextChange} />
<input ref={c => this.nextComponent=c} />

nextComponent 在 ref 中设置。React.findDOMNode 使用它this.nextComponent来获取下一个组件对应的 DOM 节点。