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节点上的焦点方法设置焦点。

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节点。

Answer 2

上面的代码遇到了一些错误。所以我将其更改为如下所示，并且效果很好。

handleTextChange1(e) {
    if (e.length <= 1) {
      this.setState({value: e})
    }
    if (e.length === 1) {
      this.input2.focus();
    }
  }

在TextInputComponent中，我还有：

<TextInput
    ref= {(input) => this.input1 = input}
    selectTextOnFocus={true}
    onChangeText={this.handleTextChange1}/>

<TextInput
    ref= {(input) => this.input2 = input}
    selectTextOnFocus={true}
    onChangeText={this.handleTextChange2}/>

一旦在没有jQuery的情况下达到最大长度值，则关注下一个输入并仅接受数值

2 个答案: