Tengo un componente que genera entrada en Form. Estoy tratando de pasar una función al evento OnChange, pero siempre obtengo un error
import { FormGroup, FloatingLabel, FormControl } from "react-bootstrap"; const FormInput = (props) =>{ return( <FormGroup controlId={props.controlId} className="mb-3"> <FloatingLabel label={props.label}> <FormControl type={props.type} name={props.controlId} placeholder={props.label} onChange={props.onChange} /> </FloatingLabel> </FormGroup> ) } export default FormInput;Y en mi aplicación estoy pasando accesorios a Component. No puedo averiguar cómo pasar la función para obtener valor en la entrada
import React, { Component } from "react"; import { Container, Row, Form, Button, } from "react-bootstrap"; import FormInput from "./FormInput"; import { FormGroup, FloatingLabel, FormControl } from "react-bootstrap"; class AddRecipe extends Component { constructor() { super(); this.state = { recipeImage: "", recipeName: "", recipeIngredients: "", }; this.handleChange = this.handleChange.bind(this); } handleChange = (e) =>{ this.setState({ [e.target.name]: e.target.value, }); } render() { return ( <Container> <Row> <Form inline="true" className="mt-5"> <FormInput controlId="recipeImage" label="Image URL" type="url" handleChange={this.handleChange} /> <FormInput controlId="recipeName" label="Recipe Name" type="text" handleChange={this.handleChange} /> <FormInput controlId="recipeIngredients" label="Ingredients" type="textarea" handleChange={this.handleChange} /> <Button>Add</Button> </Form> </Row> </Container> ); } } export default AddRecipe;¿Cómo pasar la función handleChange como accesorios, para que pueda escribir valor en mi estado?
El problema es que en su componente, define la propiedad como onChange , pero en su aplicación, pasa la propiedad handleChange . Para corregir el error, simplemente cambie el nombre del accesorio que pasa en su aplicación:
<FormInput controlId="recipeImage" label="Image URL" type="url" onChange={this.handleChange} /> {/* this `onChange` prop should fix it */}Mi error, estaba usando un nombre diferente para los accesorios.
Después de cambiar
<FormInput controlId="recipeIngredients" label="Ingredients" type="textarea" handleChange={this.handleChange} />a
<FormInput controlId="recipeIngredients" label="Ingredients" type="textarea" onChange={this.handleChange} />Se solucionó el problema. Gracias