javascript - 如何以redux-form将值传递给占位符到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。如文档所述，您只需placeholder在TextInput组件中应用属性即可呈现占位符。

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