Question

我想关注下一个字段但是这里不能做到这就是我的代码。我使用了渲染组件的功能。但是不能这样做。

   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}
              />

并显示错误

无状态函数组件不能有refs。

Answer 1

请记住，函数是无状态组件，类是具有状态的组件，如果使用redux-form并且使用ref，则应将prop withRef设置为true withRef：boolean [optional]

如果为true，则渲染的组件将随之提供 getRenderedComponent（）方法。默认为false。如果不能使用您的组件是无状态功能组件 https://redux-form.com/6.6.3/docs/api/field.md/

您应该将Input函数转换为类，例如：

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>
);
}
}

The Field：

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

React Native redux表单转到SubmitEditing上的下一个字段

1 个答案: