是否有与 redux-form 等效的 keyboardType 道具？

Question

我开始使用 React Native 和 Redux 形式。

我想在填写我的 reduxform 字段时更改 keyboardType，但是 keyboardType 属性不起作用：

  <Field
      name="email"
      component={textAccount}
      fieldName="Email"
      keyboardType="email-address"
  />

这是文本帐户代码：

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 元素，according to the documentation。

在这种情况下，我希望能够根据我需要的字段显示最准确的键盘类型（在我的示例中为 "email-address"）。

你知道是否有任何等效的道具可用于 "Field"？

非常感谢！

Answer 1

试试 type

 type="email"

更新：

您需要在 Input 而不是 Field

中更改它

<Input
     keyboardType="email-address"
    ... />

Answer 2

您应该将其放入 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>
  );
}

然后您应该可以在 Field 上设置 keyboardType。

Answer 3

你可以这样做:

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

希望对您有所帮助！！

是否有与 redux-form 等效的 keyboardType 道具？

Is there an equivalent for keyboardType props with redux-form?

reactjs

react-native

redux-form

react-redux