在给定键的情况下聚焦特定元素

Question

我正在开发一个猜词的小应用程序。而不是单个 TextInput 我想提供有关单词有多少个字符的线索，甚至可能从一些已经显示的字符开始。

为此，我为每个字符创建一个 TextInput，然后我将第一个 TextInput 设置为 autofocus=true。

我需要的是，当用户在当前TextInput输入一个字符时，焦点跳转到下一个。

为了创建输入，我为每个键分配了一个连续的整数，并将此键传递给函数 handleKeyPress。我在这个函数中需要的是将 TextInput 与键等于 i+1.

聚焦的东西

我的代码：

handleKeyPress(i, input_text) {
    // Here I need to focus the TextInput with key===(i+1)
    const text = this.state.text;
    text[i] = input_text;
    this.setState({
      text: text,
    });
}

render() {
    let ToRender = [];
    let n= 5;  // number of characters

    // First Input has autofocus set to true
    ToRender.push(
      <TextInput
        key={0}
        size="1"
        autofocus={true}
        value={this.state.text[0]}
        onChangeText={(text) => this.handleKeyPress(0, text)}
      />
    );

    // generate the rest of the Inputs
    for (let i=1; i<n; i++) {
      ToRender.push(
        <TextInput
          key={i}
          size="1"
          value={this.state.text[i]}
          onChangeText={(text) => this.handleKeyPress(i, text)}
        />
      );
    }

    return(
      <View style={styles.container}>
        {ToRender.map((e) => e)}
      </View>
    );
}

如果某个元素是键，我如何才能聚焦它？

Answer 1

好的，我设法解决了。

首先，我必须通过字段 ref 而不是 key 来引用元素，并使用 this.refs[i].focus() 访问它们以聚焦第 i 个元素：

<TextInput
    key={i}
    ref={i}
    size="1"
    autofocus={true}
    value={this.state.text[i]}
    onChangeText={(text) => this.handleKeyPress(i, text)}
/>

然后在函数里面handleKeyPress我可以做：

handleKeyPress(i, input_text) {
    this.refs[i+1].focus();
}

在给定键的情况下聚焦特定元素

Focus a specific element given its key

javascript

android

textinput

react-native