如何將值傳遞給占位符到redux形式的textInput？

Question

所以我要創建一個包含兩個字段的登錄表單，分別是用戶名和密碼； 我想將占位符傳遞給每個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) 

如您所見，renderInput函數的TextInput中分別沒有name分別為電子郵件和密碼的兩個字段。

Answer 1

在組件renderInput的props您將可以使用那些應用於Field的組件。 作為文檔狀態，你只需要應用屬性placeholder中TextInput組件來獲得占位符呈現。

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