así que estoy tratando de realizar algún evento onChange, como aprendí, pero de alguna manera me arroja el error de que la función onChange no está definida. Se instala la dependencia correcta (react-hook-form).
Aquí está mi código.
Alguien una idea, de donde viene el problema?
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;Es porque está pasando la función onChange directamente, pero es parte de la propiedad de campo, por lo que debe pasarla como un argumento con nombre.
...Controlador
renderizar={({
campo: {onChange, onBlur, valor, nombre, referencia},
fieldState: { invalid, isTouched, isDirty, error },
}) => (...
Por favor, eche un vistazo a los documentos: https://react-hook-form.com/api/usecontroller/controller
O pase el campo de valor y use el método field.onChange .
La salida al enviar será la siguiente después de proporcionar las entradas
{nombre: "muestra", correo electrónico: "muestra@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;