React Native-按下鍵盤上的“ Next”按鈕，將焦點移至下一個輸入框

Question

我在反應土著世界方面非常陌生。 我想將焦點從第一個輸入框轉移到第二個輸入框。 請找到我下面的代碼。

<View style={styles.inputViewStyle}>
                  <TextInput
                    ref={firstnameRef => (this.firstnameRef = 
                    firstnameRef)}
                    label="Firstname"
                    returnKeyType="next"
                    autoCorrect={false}
                    value={this.state.firstname}
                    onSubmitEditing={() => 
              this.refs.middlenameRef.focus()}
                    onChangeText={firstname => this.setState({ firstname })}
                    blurOnSubmit={false}
                  />
                </View> 

    <View style={styles.inputViewStyle}>
                  <TextInput
                    ref={middlenameRef => (this.middlenameRef = middlenameRef)}
                    label="Middlename"
                    returnKeyType="go"
                    value={this.state.middlename}
                    onChangeText={middlename => this.setState({ middlename })}
                  />
                </View>

我收到錯誤->“未定義不是對象（正在評估'this2.middlenameRef.focus（）'）”

更新： constructor(props) { super(props); this.state = { firstname: "", middlename: "", lastname: ""
}; constructor(props) { super(props); this.state = { firstname: "", middlename: "", lastname: ""
};

請指導。 提前致謝。

Answer 1

嘗試這個：

onSubmitEditing={() => { this.middlenameRef.focus() }}

Answer 2

觸發前一個TextInput的onSubmitEditing時，設置第二個TextInput焦點。

嘗試這個

1. 在第二個TextInput上添加一個ref ref = {（input）=> {this.secondTextInput = input; }}

2. 將焦點函數綁定到第一個TextInput的onSubmitEditing事件。 onSubmitEditing = {（）=> {this.secondTextInput.focus（）; }}

3. 切記將blurOnSubmit設置為false，以防止鍵盤閃爍。 blurOnSubmit = {FALSE}

Answer 3

您可以通過此直接獲取實例。 空檢查可能是調試的好選擇。

onSubmitEditing={() => this.middlenameRef && this.middlenameRef.focus()}

Answer 4

<TextInput
    placeholder = "FirstTextInput"
    returnKeyType = { "next" }
    onSubmitEditing={() => { this.secondTextInput.focus(); }}
    blurOnSubmit={false}
/>
<TextInput
    ref={(input) => { this.secondTextInput = input; }}
    placeholder = "secondTextInput"
/>