Question

我正在尝试使用React Redux Form在React Native中构建一个表单但是我可以使用<TextInput>用于电子邮件＆amp;密码，但现在我想使用一些复选框和下拉菜单。他们的documentationm没有提供React Native指南或任何示例，因为他们只使用<Input>标记用于任何输入，但我如何在React Native中使用它？

这是我用于电子邮件的字段渲染：

const renderField = ({ label, type, keyboardType, name, meta: { touched, error }, input: { onChange, ...restInput } }) => {
  return (
    <View style={{ flexDirection: 'column', height: 70, alignItems: 'flex-start' }}>
      <View style={{ flexDirection: 'row', height: 30, alignItems: 'center', borderColor: 'black', borderBottomWidth: 1, }}>
        <FontAwesome name='email-outline' size={18} color='#cccccc' style={{ paddingLeft: 2 }} />
        <TextInput style={{ height: 37, width: 280, paddingLeft: 10, fontSize: 20 }}
          keyboardType={keyboardType} onChangeText={onChange} {...restInput}
          placeholder={label}
        >
        </TextInput>
      </View>
      {touched && ((error && <Text style={{ color: 'red', }}>{error}</Text>))}
    </View>);
}; 

<Field keyboardType='email-address' type='email' label='Email' component={renderField} name='email' />

Answer 1

问题是什么？

只需在您需要的地方创建一个checkboxField组件，而不是renderField。只需使用道具中的onChange函数将value和值设置为值本身。

以下是一个更容易理解的示例：

const renderField = ({ input: { onChange, value } }) => {
   return (
      <View>
         <Switch 
           onValueChange={(value) => onChange(value)} 
           value={value} 
         /> 
      </View>
   );
};

React Native中的React Redux Form复选框和下拉字段？

1 个答案: