javascript - 在没有 jQuery 的情况下，一旦达到 maxlength 值就关注下一个输入，并且只接受数值

Question

我有两个关于 react 输入的问题。有什么方法可以让输入在达到 maxLength 后自动聚焦下一个字段并使用react而不使用 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 中设置。 this.nextComponent被React.findDOMNode用来获取下一个组件对应的DOM节点。