Tengo una página de comentarios de los clientes o más bien una página de contacto. Hay unos cuantos ahí. La página está escrita en JavaScript, React en el componente de clase. Quiero convertirlo en un componente funcional.
A continuación, arrojaré el código fuente de la página.
import React, { Component } from "react"; import { Button, Form, FormGroup, Label, Input, FormText } from "reactstrap"; import axios from "axios"; class Contacts extends Component { constructor(props) { super(props); this.state = { name: "", email: "", subject: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange = e => { this.setState({ [e.target.name]: e.target.value }); //console.log(`${e.target.name}:${e.target.value}`); }; async handleSubmit(e) { e.preventDefault(); const { name, email, subject } = this.state; const form = await axios.post("/api/form", { name, email, subject }); } render() { return ( <Form className="col-xs-12 col-md-6" onSubmit={this.handleSubmit}> <FormGroup> <Label for="name">name:</Label> <Input type="text" name="name" onChange={this.handleChange} /> </FormGroup> <FormGroup> <Label for="exampleEmail">Email:</Label> <Input type="email" name="email" onChange={this.handleChange} /> </FormGroup> <FormGroup> <Label for="subject">Subject:</Label> <Input type="textarea" name="subject" onChange={this.handleChange} /> </FormGroup> <Button>Submit</Button> </Form> ); } } export default Contacts;1- primero cree un componente funcional como el siguiente:
2- agregue algunos ganchos para el estado:
3- Refactorizar funciones de una nueva forma:
4- Al final añade el apartado de devolución.
Finalmente tienes algo como esto:
export default function Contacts() { const [state, setState] = useState({ name: '', email: '', subject: '', }); const handleChange = (e) => { setState({ [e.target.name]: e.target.value }); //console.log(`${e.target.name}:${e.target.value}`); }; const handleSubmit = async (e) => { e.preventDefault(); const { name, email, subject } = state; const form = await axios.post('/api/form', { name, email, subject, }); }; return ( <Form className="col-xs-12 col-md-6" onSubmit={handleSubmit}> <FormGroup> <Label for="name">name:</Label> <Input type="text" name="name" onChange={handleChange} /> </FormGroup> <FormGroup> <Label for="exampleEmail">Email:</Label> <Input type="email" name="email" onChange={handleChange} /> </FormGroup> <FormGroup> <Label for="subject">Subject:</Label> <Input type="textarea" name="subject" onChange={handleChange} /> </FormGroup> <Button>Submit</Button> </Form> ); }const Contacts = (props) => { const [name, setName] = useState(); const [email, setEmail] = useState(); const [subject, setSubject] = useState(); const handleChange = useCallback((setState, event) => { setState(event.target.value); }, []); const handleSubmit = useCallback(async () => { const response = await axios.post("/api/form", { name, email, subject }); console.log(response) }, [name, email, subject]); return ( <Form className="col-xs-12 col-md-6" onSubmit={handleSubmit}> <FormGroup> <Label for="name">name:</Label> <Input type="text" name="name" onChange={handleChange.bind(null, setName)} /> </FormGroup> <FormGroup> <Label for="exampleEmail">Email:</Label> <Input type="email" name="email" onChange={handleChange.bind(null, setEmail)} /> </FormGroup> <FormGroup> <Label for="subject">Subject:</Label> <Input type="textarea" name="subject" onChange={handleChange.bind(null, setSubject)} /> </FormGroup> <Button>Submit</Button> </Form> ); }