如何使用 React Hooks 通过单个处理函数处理 React Native 中的表单

Question

我有一个包含许多 TextInput 字段的表单，我想为每个 onChangeText 道具使用一个处理函数。

在 React 中很容易，因为我们可以使用 [name] = value 设置状态，因为处理程序为我们提供了事件，但在 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 Hooks 来完成。到处寻找但没有找到解决方案。我知道如何使用基于 class 的组件处理此表单，但我无法理解如何使用 React Hooks 实现此目的。请帮助！！！

Answer 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>

Answer 2

我就是这样解决的。感谢 RossHochwert 的帮助。我刚刚在 onChangeHandler 中传递了另一个参数，与我在 useState 中使用的属性名称相同。

export const myForm = () => {
 const [form, setForm] = useState({name: '', number: '', address: '' })

 const onChangeHandler = (value, name) => {
  // how to handle for each state field
  setForm(form => ({
    ...form,
    [name]: value
  }))
 }
return (
 <View>
  <View style={styles.inputContainer}>
   <Text>Product Name</Text>
   <TextInput
    value={form.name}
    onChangeText={(value) => onChangeHandler(value, "name")}
   ></TextInput>
  </View>
  <View style={styles.inputContainer}>
  <Text>Product Name</Text>
   <TextInput
    value={form.number}
    onChangeText={(value) => onChangeHandler(value, "number")}
   ></TextInput>
  </View>
  <View style={styles.inputContainer}>
   <Text>Product Name</Text>
   <TextInput
    value={form.address}
    onChangeText={(value) => onChangeHandler(value, "address")}
    ></TextInput>
  </View>
 <TouchableOpacity
  activeOpacity={0.6}
  onPress={saveForm}
 >
  <Text style={{ color: '#fff' }}>SUBMIT</Text>
 </TouchableOpacity>
<View> )}

如何使用 React Hooks 通过单个处理函数处理 React Native 中的表单

How to Handle Form in React Native with a Single Handler Function using React Hooks

android

reactjs

react-native

react-native-android

react-hooks