如何在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电子邮件的两个字段

Answer 1

在组件renderInput的props中，可以使用应用于组件字段的属性。如文档所述，您只需在TextInput组件中应用属性placeholder，即可呈现占位符。

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