反应原生 onChange 未定义

Question

所以我正在尝试执行一些 onChange 事件，正如我所了解的，但不知何故，它向我抛出了 onChange 函数未定义的错误。安装了正确的依赖项（react-hook-form）。

这是我的代码。

有人出主意，问题出在哪里？

https://codesandbox.io/embed/jolly-butterfly-diqb1?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import {
  StyleSheet,
  TextInput,
  Text,
  TouchableOpacity,
  Image,
  ScrollView
} from "react-native";
import { useForm, Controller } from "react-hook-form";

const AddAddress = () => {
  const { control, handleSubmit, errors, reset } = useForm({
    defaultValues: {
      name: "",
      email: ""
    }
  });

  function submit(data) {
    console.log(data);
  }

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>React Hook Form</Text>
      <Controller
        control={control}
        name="name"
        render={({ onChange, value }) => (
          <TextInput
            placeholder="Name"
            style={styles.input}
            onChangeText={(value) => onChange(value)}
          />
        )}
      />
      <Controller
        control={control}
        name="email"
        render={({ onChange, value }) => (
          <TextInput
            placeholder="Email"
            style={styles.input}
            onChangeText={(value) => onChange(value)}
          />
        )}
      />
      <TouchableOpacity onPress={handleSubmit(submit)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

export default AddAddress;

Answer 1

这是因为你直接传递了 onChange 函数，但它是 field prop 的一部分，所以你应该将它们作为命名参数传递

...控制器
render={({
字段：{ onChange, onBlur, value, name, ref },
fieldState: { invalid, isTouched, isDirty, error },
}) => ( ...

请查看文档：https://react-hook-form.com/api/usecontroller/controller

或者传入value字段，使用field.onChange方法。

这是修改后的代码。

提供输入后，提交时的输出将如下所示
{名称：“sample”，电子邮件：“sample@g,co”}

import React from "react";
import {
  StyleSheet,
  TextInput,
  Text,
  TouchableOpacity,
  Image,
  ScrollView
} from "react-native";
import { useForm, Controller } from "react-hook-form";

const AddAddress = () => {
  const { control, handleSubmit, errors, reset } = useForm({
    defaultValues: {
      name: "",
      email: ""
    }
  });

  function submit(data) {
    console.log(data);
  }

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <Text style={styles.title}>React Hook Form</Text>
      <Controller
        control={control}
        name="name"
        // ------------ modified here
        render={({field}) => (
          <TextInput
            placeholder="Name"
            style={styles.input}
            onChange = {(e)=>field.onChange(e)}
            value = {field.value}
          />
        )}
      />
      <Controller
        control={control}
        name="email"
        // ------------ modified here
        render={({ field }) => (
          <TextInput
            placeholder="Email"
            style={styles.input}
            onChange = {(e)=>field.onChange(e)}
            value = {field.value}
          />
        )}
      />
      <TouchableOpacity onPress={handleSubmit(submit)}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#282828",
    alignItems: "center",
    justifyContent: "center"
  },
  title: {
    fontSize: 36,
    marginBottom: 30,
    marginTop: 16,
    color: "white"
  },
  error: {
    fontSize: 16,
    color: "red",
    marginTop: 16,
    marginBottom: 16,
    marginLeft: 36,
    marginRight: 36
  },
  input: {
    fontSize: 18,
    borderWidth: 1,
    padding: 12,
    width: "80%",
    borderRadius: 10,
    backgroundColor: "white",
    marginBottom: 16,
    marginTop: 16
  },
  image: {
    width: 120,
    height: 120,
    borderColor: "orange",
    borderWidth: 2,
    borderRadius: 100
  },
  button: {
    fontSize: 20,
    color: "white",
    width: 120,
    marginTop: 8,
    borderRadius: 10,
    backgroundColor: "#c01c00",
    padding: 8,
    textAlign: "center"
  }
});

export default AddAddress;