我正在嘗試自動關注提交時輸入的下一個文本

Question

我通過映射組件並向下傳遞玩家編號來呈現玩家名稱的文本輸入。 我希望用戶按Enter鍵，然后屏幕將焦點放在下一個輸入上。

我已經試過了

<TextInput style={styles.nameBox} placeholder="Enter Name" onChangeText={(text) => this.setState({text})} ref={`input-${this.props.number}`}
  onSubmitEditing={value => {
   this.setState({ value })
   if (value) this.refs.input_2.focus();
}} />

問題是我無法對input_2進行硬編碼，因為這樣我的所有輸入都將采用這種方式。 我希望它專注於“ input-this.props.number ++”，基本上是以下輸入。

Answer 1

您可以開發一個在返回時觸發的函數，並將要獲取焦點的輸入類型的ID傳遞為參數。

以下示例代碼是由medium.com的 Aung Myint Thein 編寫的 ：

//sample text fields

<TextField
  label={"Field 1"}
  blurOnSubmit={ false }
  returnKeyType={ 'next' }
  onSubmitEditing={() => { this.focusTheField('field2'); }}
/>
<TextField
  ref={input => { this.inputs['field2'] = input }}
  label={"Field 2"}
/>

//function

// variable to hold the references of the textfields
inputs = {};
 // function to focus the field
focusTheField = (id) => {
   this.inputs[id].focus();
}

希望這可以幫助