提问者:小点点

如何使用React钩子在React Native中使用单个处理程序函数处理窗体


我有一个带有许多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钩子来实现这个。 请帮帮我!!!


共1个答案

匿名用户

您可以将表单的名称与文本输入一起传递给您的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>