我有一个带有许多TextInput字段表单,我希望为每个onChangeText道具使用一个处理函数。
在react中很容易,因为我们可以用[name]=value设置状态,因为handler给我们提供事件,但在react native中,它给我们提供TextInput字段的值。
我的例子是这样的--
export const myForm = () => {
const [form, setForm] = useState({name: '', number: '', address: '' })
const onChangeHandler = (value) => {
// how to handle for each state field
}
return (
<View>
<View style={styles.inputContainer}>
<Text>Product Name</Text>
<TextInput
value={form.name}
name="name"
onChangeText={onChangeHandler}
></TextInput>
</View>
<View style={styles.inputContainer}>
<Text>Product Name</Text>
<TextInput
value={form.number}
name="number"
onChangeText={onChangeHandler}
></TextInput>
</View>
<View style={styles.inputContainer}>
<Text>Product Name</Text>
<TextInput
value={form.address}
name="address"
onChangeText={onChangeHandler}
></TextInput>
</View>
<TouchableOpacity
activeOpacity={0.6}
onPress={saveForm}
>
<Text style={{ color: '#fff' }}>SUBMIT</Text>
</TouchableOpacity>
<View> )}
有没有什么办法可以用React钩子来实现。 到处找都找不到解决办法。 我知道如何用基于类的组件来处理这个表单,我不能够理解如何用React钩子来实现这个。 请帮帮我!!!
您可以将表单的名称与文本输入一起传递给您的onChangeHandler吗?
您还可以使用尝试使用onChange而不是OnChangeText?
const onChangeHandler = (name, value) => {
if(name=="address"){
//setState(value)
} else if (name=="number"){
//setState(value)
}
}
<View style={styles.inputContainer}>
<Text>Product Name</Text>
<TextInput
value={form.name}
name="name"
onChangeText={(value)=>onChangeHandler(name,value)}
></TextInput>
</View>
<View style={styles.inputContainer}>
<Text>Product Name</Text>
<TextInput
value={form.number}
name="number"
onChangeText={(value)=>onChangeHandler(name,value)}
></TextInput>
</View>