React-native formik 表單引用始終為空

Question

我有一個帶有 TextInput 和 Text 的組件：

const InputWithMessage = ({ label, formikProps, formikKey,ref, ...rest }) => {
  if (formikProps.touched[formikKey] && formikProps.errors[formikKey]) {
    styles.inputStyles.borderColor = 'red';
  }
  return (
    <View style={styles.inputStyles}>
      <TextField
        lineWidth={0}
        activeLineWidth={0}
        style={styles.textFieldStyles}
        label={label}
        ref={ref}
        tintColor={
          formikProps.touched[formikKey] && formikProps.errors[formikKey]
            ? colors.red
            : colors.primary
        }
        onChangeText={e => formikProps.setFieldValue(formikKey, e)}
        onBlur={formikProps.handleBlur(formikKey)}
        {...rest}
      /> .....  

此組件以帶有 refs 的 formik 形式使用以從一個輸入轉到另一個輸入：

<View style={{width: '50%',marginRight: 1}}>
                    <InputWithMessage
                      formikProps={formikProps}
                      formikKey="firstName"
                      value={formikProps.values.firstName}
                      placeholder="Prénom*"
                      returnKeyType="next"
                      ref={this.firstName}
                      onSubmitEditing={() => {
                         this.birthName.current.focus()
                       }}
                      blurOnSubmit={false}
                      keyboardType='default'
                      autoFocus
                    /> ....  

我在構造函數中像這樣推送我的 refs： this.birthName = React.createRef();

除了我的夢想一直都是空的，所以焦點無法完成......

有任何想法嗎？

Answer 1

我認為你的焦點調用是不正確的，你需要鏈接到當前。

所以在你的 onSubmitEditing 里面你需要

this.birthName.current._root.focus();

Answer 2

您應該設置相同的名稱。

this.birthName = React.createRef();
...
<TextField
ref={this.birthName}
...
/>
...
<InputWithMessage
...
onSubmitEditing={() => {
  this.birthName.current.focus()
}}
...
/>

示例用法示例鏈接

import * as React from 'react';
import { Text, View, StyleSheet,TextInput,Button } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
    this.textInput2 = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {

    this.textInput.current.focus();
  }

  render() {
    return (
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
          <TextInput ref={this.textInput} style={{width:"80%", height:30,backgroundColor:"blue",color:"#ffffff"}}/>
          <TextInput ref={this.textInput2} style={{width:"80%", height:30,backgroundColor:"red",color:"#ffffff"}}/>
          <Button title="focus button" onPress={this.focusTextInput}/>
      </View>
    );
  }
}

使用React 16.3或更早版本時使用常規callback ref 。

constructor(props) {
    super(props);

    this.textInput = null;
    this.focusTextInput = () => {

      if (this.textInput) this.textInput.focus();
    };
}
   ....
<Text ref={ element => { this.textInput = element}} > </Text>
<Button title="Focus the text input"  onPress={this.focusTextInput} />

Answer 3

您應該使用innerRef而不是ref並且不要忘記使用.current

例子

this.birthName.current._root.focus();