如何以 redux 形式将值传递给占位符到 textInput？

Question

所以我正在创建一个登录表单，其中包含两个字段，分别是用户名和密码；我想将占位符传递给这些字段中的每一个。但是，无论我尝试什么，都没有显示占位符。

代码

const submit = values => {
  console.log('submitting form', values)
};

const renderInput = ({ input: { onChange, ...restInput } }) => {
  return <TextInput style = { styles.input } onChangeText = { onChange } { ...restInput }/>
};

const LoginForm = props => { const { handleSubmit } = props;
  return (
    <View style={styles.container}>
      <View>
        <Field name="email"    placeholder="Email"    component={renderInput} />
        <Field name="password" placeholder="Password" component={renderInput} />
      </View>

      <View>
        <View style={styles.loginBtnContainer}>
          <TouchableOpacity style={styles.button} onPress={handleSubmit(submit)}>
            <Text style={{fontSize: 30, color: '#17a2e0'}}>Login</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

export default reduxForm({
  form: 'test'
})(LoginForm)

如您所见，分别带有 name 电子邮件和密码的两个字段在 renderInput 函数的 TextInput 中不存在。

Answer 1

在您的组件 renderInput 中，在其 props 中，您将可以使用应用于组件 Field 的组件。正如 documentation 所述，您只需在 TextInput 组件中应用属性 placeholder 即可呈现占位符。

const renderInput = ({ placeholder, input: { onChange, ...restInput } }) => {
    return <TextInput placeholder={placeholder} style = { styles.input } onChangeText = { onChange } { ...restInput }/>
};

如何以 redux 形式将值传递给占位符到 textInput？

How to pass value to placeholder to textInput in redux-form?

javascript

react-native

redux

redux-form

react-props

代码