React Native redux 表单转到 SubmitEditing 中的下一个字段答案

【问题标题】：React Native redux form go to next field in on SubmitEditingReact Native redux 表单转到 SubmitEditing 中的下一个字段
【发布时间】：2018-02-26 00:59:17
【问题描述】：

我想关注下一个字段，但我的代码无法做到这一点。我使用了渲染组件的函数。但是不能这样做。

   export const Input = ({
      imageLeft,
      imageRight,
      containerStyle,
      inputStyle,
      ...props,
      focus,
    }) => (
      <View
        style={StyleSheet.flatten([styles.containerStyle, containerStyle])}
      >
        { imageLeft && <Image
          style={leftImageColor(focus)}
          source={placeholderImageAssets[imageLeft]}
        /> }
        <TextInput
          ref={props.refField}
          autoCorrect={false}
          underlineColorAndroid='transparent'
          autoCapitalize='sentences'
          keyboardType='default'
          placeholderTextColor={placeHolderColor(focus)}
          {...props}
          style={StyleSheet.flatten([styles.inputStyle, inputStyle])}
        />
        { imageRight && <Image
          style={styles.imageRight}
          source={checkMarkImageAssets[imageRight]}
        /> }
      </View>
    )

我将这个方法渲染成组件

<Field
                ref={(componentRef) => this.field2 = componentRef}
                refField="field2"
                name='lastName'
                placeholder='Last Name'
                component={Input}
                validate={[required()]}
                placeholderTextColor='#fff'
                containerStyle={styles.textInputContainerStyle}
                inputStyle={styles.textInputStyle}
              />

并显示错误

无状态函数组件不能有引用。

【问题讨论】：

标签： react-native redux-form

【解决方案1】：

记住函数是无状态的组件，类是有状态的组件，如果你正在使用 redux-form 并且你使用了 ref，你应该将 prop withRef 设置为 true withRef : boolean [可选]

如果为 true，渲染的组件将与 getRenderedComponent() 方法。默认为假。不能使用如果您的组件是无状态功能组件 https://redux-form.com/6.6.3/docs/api/field.md/

你应该将输入函数转换为一个类，例如：

export class Input extends React.Component {
render(){
const {
      imageLeft,
      imageRight,
      containerStyle,
      inputStyle,
      ...props,
      focus,
    } = this.props;
return(
      <View
        style={StyleSheet.flatten([styles.containerStyle, containerStyle])}
      >
        { imageLeft && <Image
          style={leftImageColor(focus)}
          source={placeholderImageAssets[imageLeft]}
        /> }
        <TextInput
          ref={props.refField}
          autoCorrect={false}
          underlineColorAndroid='transparent'
          autoCapitalize='sentences'
          keyboardType='default'
          placeholderTextColor={placeHolderColor(focus)}
          {...props}
          style={StyleSheet.flatten([styles.inputStyle, inputStyle])}
        />
        { imageRight && <Image
          style={styles.imageRight}
          source={checkMarkImageAssets[imageRight]}
        /> }
      </View>
);
}
}

领域：

<Field 
ref={ref => this.field1 = ref}
component={Input}
withRef
/>

【讨论】：