如何使用 React Hooks 使用单个处理函数在 React Native 中处理表单答案

【问题标题】：How to Handle Form in React Native with a Single Handler Function using React Hooks如何使用 React Hooks 使用单个处理函数在 React Native 中处理表单
【发布时间】：2020-11-07 08:04:35
【问题描述】：

我有一个包含许多 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 来完成。到处找，但没有找到解决办法。我知道如何使用基于类的组件来处理此表单，但我无法理解如何使用 React Hooks 来实现这一点。请帮忙！！！

【问题讨论】：

我认为这与钩子无关。请确认 onChangeText 的返回类型是什么。如果它的值，那么有一个不同的方法来解决这个问题，但如果它是一个 HTML 事件，那么可能还有其他一些问题
正如我提到的，onChangeText 返回我们在文本字段中输入的值。它不会在 React Native 中返回事件。我的问题是如何更新每个 TextInput 字段的 setForm 状态。
你能在onChangeText上使用onChange吗？ onChange 返回{ nativeEvent: { eventCount, target, text} }。 Link

标签： android reactjs react-native react-hooks react-native-android

【解决方案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>

【讨论】：

【解决方案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> )}

【讨论】：