React Redux Форма флажок и раскрывающееся поле в React Native? - PullRequest
0 голосов
/ 16 мая 2018

Я пытаюсь создать форму в React Native с использованием формы React Redux, но я могу использовать <TextInput> для электронной почты и пароля, но теперь я хотел бы использовать некоторые флажки и раскрывающиеся списки. Их документация не содержит указаний 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' />

1 Ответ

0 голосов
/ 17 мая 2018

А в чем проблема?

Просто создайте checkboxField компонент, который вы будете использовать вместо renderField в нужных вам местах.И просто используйте функцию onChange из реквизита, чтобы установить value и значение в качестве самого значения.

Вот пример, который будет легче понять:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...