如何在redux-form中将值传递给占位符到textInput？

Question

所以我正在创建一个包含两个字段的登录表单，用户名＆amp;密码分别;我想将占位符传递给每个Field。但是，无论我尝试什么，都不会显示占位符。

代码

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电子邮件＆amp;密码分别不存在于renderInput函数的TextInput中。

Answer 1

在props的{​​{1}}组件中，您可以使用应用于组件Field的组件。正如documentation所述，您只需在placeholder组件中应用属性TextInput即可获得占位符。

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