Есть ли эквивалент для свойств keyboardType с redux-form?
Я начинаю с реакции на родную и сокращенную форму.
Я хотел бы изменить keyboardType при заполнении полей reduxform, однако свойства keyboardType не работают:
<Field
name = "email"
component = {textAccount}
fieldName = "Email"
keyboardType = "email-address"
/>
Вот код textAccount:
import React from 'react';
import { View } from 'react-native';
import { Input } from 'react-native-elements';
function textAccount(props) {
const { input, fieldName } = props;
return (
<View>
<Input
onChangeText = {input.onChange}
value = {input.value}
placeholder = {fieldName}
/>
</View>
);
}
export default textAccount;
Я предполагаю, что это относится к собственному элементу TextInput реакции, согласно документации.
В этом случае я хотел бы иметь возможность отображать наиболее точный тип клавиатуры в зависимости от поля, которое мне нужно («адрес электронной почты» в моем примере).
Вы знаете, есть ли какие-либо эквивалентные свойства для использования с "Field"?
Большое спасибо!
Ответы 3
попробуйте с type
type = "email"
Обновлять :
Поменять нужно в Input вместо Field
<Input
keyboardType = "email-address"
... />
Готово, только что добавил в исходный пост
Просто попробовал и выглядит отлично! Проблема в том, что у меня есть несколько разных Field (электронная почта, пароль, имя пользователя и т. д.), Использующих один и тот же компонент textAccount. У вас есть какой-нибудь совет, как бы вы их разделить, чтобы я действительно мог использовать реквизит keyboardType в соответствии с моими потребностями?
точно так же, как вы делаете с input, fieldName, передавая его в props
Вы должны просто поместить его в компонент Input:
<Input
onChangeText = {input.onChange}
value = {input.value}
placeholder = {fieldName}
keyboardType = "email-address"
/>
Кроме того, глядя на код redux-form, кажется, что все неизвестные параметры передаются в component:
function textAccount(props) {
const { input, fieldName, ...rest } = props;
return (
<View>
<Input
onChangeText = {input.onChange}
value = {input.value}
placeholder = {fieldName}
{...rest}
/>
</View>
);
}
и тогда вы сможете просто установить keyboardType на свой Field.
Спасибо за ответ, однако я не понимаю, как я могу просто установить keyboardType прямо в моем поле, поскольку обычно он не работает?
@Flora Как я уже сказал, вам нужно имеют, чтобы установить его на Input. Однако Field передает все, что ему неизвестно, в component, то есть в textAccount. Вы уже используете это для передачи fieldName. Вы можете использовать тот же процесс для передачи keyboardType от Field к textAccount. Вам нужно только правильно записать textAccount и передать все неизвестные свойства Input, как я продемонстрировал с помощью синтаксиса ...rest.
Отлично, спасибо за разъяснения, теперь все работает!
Сделать это можно так:
const renderField = ({ label, requiredMarker, keyboardType, placeholder, input: { onChange, ...restInput }}) => {
return (
<View>
<Text style = {{fontSize: 16, fontWeight: '600'}}>{label}<Text style = {{color: '#dc3545'}}>{requiredMarker}</Text></Text>
<TextInput style = {{ padding: 5 }} keyboardType = {keyboardType} onChangeText = {onChange} {...restInput} placeholder = {placeholder} autoCapitalize='none'>
</TextInput>
</View>);
};
const UserComponent = props => {
return (
<View style = {{ flex: 1, flexDirection: 'column', margin: 20, justifyContent: 'flex-start', }}>
<Field name = "email" keyboardType = "email-address" label = "Email: " requiredMarker = "*" placeholder = "Enter email"
component = {renderField}
/>
</View>
);
}
Надеюсь, это поможет !!
Спасибо, но у меня клавиатура не изменилась с "базовой", которая обычно отображается ...