javascript - React-Native Formik表单引用始终为null(React-native formik form refs are always null)

Question

I have a component with an TextInput & Text :

(我有一个带有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}
      /> .....  

This component is used in a formik form with refs to go from one input to another :

(此组件以带引用的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
                    /> ....  

I shove my refs like this in the constructor: this.birthName = React.createRef();

(我将这样的引用推到构造函数中： this.birthName = React.createRef（）;)

Except that my dreams are all the time null and so the focus can not be done...

(除了我的梦想一直都是空虚的，所以无法集中精力...)

any ideas?

(有任何想法吗？)

  ask by E.D translate from so

Answer 1

I think your focus call is incorrect, you need to chain to root off of current.

(我认为您的焦点召唤是不正确的，您需要束缚以根除电流。)

so inside of your onSubmitEditing you need

(因此在onSubmitEditing内部，您需要)

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