Solo quiero hacer un prefacio de que estoy aprendiendo JavaScript y React, así que todo esto es muy nuevo para mí.
Estoy creando una aplicación de calificación de películas "simple" y necesito poder enviar una revisión a un div "al enviar" y no puedo averiguar cómo hacerlo. Intenté usar el estado de actualización en reaccionar y / o crear funciones para intentar lograr esto y no puedo entender cómo hacerlo por mi vida. Tuve algo de éxito usando el último método, pero recibía errores sobre el uso de accesorios clave únicos. El otro problema fue que debo usar un componente de calificación de estrellas y cuando envié la revisión, no estaba enviando eso al div. Aquí es donde estoy actualmente:
import { Button, Form, Input } from "reactstrap"; import Stars from "./stars"; export default function ReviewForm() { const [reviews, setReviews] = useState(""); const onChange = (e: any) => { setReviews(e.target.value); }; const onSubmit = (e: any) => { console.log("Form Submitted"); }; return ( <div className="form-container"> <Stars /> <Form onSubmit={onSubmit}> <Input className="form-control" type="text" placeholder="Enter you review" value={reviews} onChange={onChange} /> <br></br> <Button type="submit" className="btn btn-primary"> Submit </Button> </Form> </div> ); } // This is what I have in my Stars component: import React, { useState } from "react"; import { FaStar} from 'react-icons/fa' const Stars = () => { const [rating, setRating] = useState(0); const [hover, setHover] = useState(null); return( <div> {[...Array(5)].map((star, i) => { const ratingValue = i + 1; return <label> <input type="radio" name="rating" value={ratingValue} onClick={() => setRating(ratingValue)} /> <FaStar className="star" color={ratingValue <= (hover || rating) ? "gold" : "lightgray"} size={20} onMouseEnter={() => setHover(ratingValue)} onMouseLeave={() => setHover(null)} /> </label>; })} <p>I rate this movie {rating + " stars"}</p> </div> ); }; export default Stars```Aquí está la versión de trabajo de su código. Debe usar key en su map y e.preventDefault() en su función de envío de formulario. Como toque final, debe establecer otro state dentro de su envío de formulario y mostrar este valor en un div o algún elemento html. También veo que desea convertir el estado del niño en el padre para que pueda devolver la llamada para esto https://codesandbox.io/embed/brave-euler-ybp9cx?fontsize=14&hidenavigation=1&theme=dark
Formulario de revisión.js
export default function ReviewForm() { const [reviews, setReviews] = useState(""); const [value, setValue] = useState(""); const [star, setStar] = useState(); const onChange = (e: any) => { setReviews(e.target.value); }; const onSubmit = (e: any) => { e.preventDefault(); setValue(reviews + " with " + star + " star "); }; return ( <div className="form-container"> <Stars setStar={setStar} /> <Form onSubmit={onSubmit}> <Input className="form-control" type="text" placeholder="Enter you review" value={reviews} onChange={onChange} /> <br></br> <Button type="submit" className="btn btn-primary"> Submit </Button> <div>{value}</div> </Form> </div> ); }estrellas.js
const Stars = ({ setStar }) => { const [rating, setRating] = useState(0); const [hover, setHover] = useState(null); const handleClick = (ratingValue) => { setRating(ratingValue); setStar(ratingValue); }; return ( <div> {[...Array(5)].map((star, i) => { const ratingValue = i + 1; return ( <label key={i}> <input type="radio" name="rating" value={ratingValue} onClick={() => handleClick(ratingValue)} /> <FaStar className="star" color={ratingValue <= (hover || rating) ? "gold" : "lightgray"} size={20} onMouseEnter={() => setHover(ratingValue)} onMouseLeave={() => setHover(null)} /> </label> ); })} <p>I rate this movie {rating + " stars"}</p> </div> ); }; export default Stars;import { Button, Form, Input } from "reactstrap"; import Stars from "./stars"; export default function ReviewForm() { const [Reviews, setReviews] = useState(""); const [ReviewsRating, setReviewsRating] = useState(5); const [Reviews_, setReviews_] = useState([]); const onChange = (e: any) => { setReviews(e.target.value); }; const onSubmit = (e: any) => { e.preventDefault() console.log("Form Submitted"); //After upload to the server setReviews_([Reviews, ...Reviews_] }; return ( <div className="form-container"> <Stars getRating={getRating}/> <Form onSubmit={onSubmit}> <Input className="form-control" type="text" placeholder="Enter you review" value={reviews} onChange={onChange} /> <br></br> <Button type="submit" className="btn btn-primary"> Submit </Button> </Form> <div class="reviews"> {Reviews_.map(item => <div> {item}</div> )} </> </div> ); }```Luego, para obtener el valor de calificación de estrellas, use accesorios como ... Y asegúrese de llamar a esa propiedad (función) dentro de su componente Inicio
const getRating =(value)=>{ setReviewsRating(value) }Probablemente esté viendo una actualización de la página cuando presiona el botón Enviar. Este es el comportamiento predeterminado de los formularios HTML.
Al usar React o cualquier marco de front-end, querrá manejar el envío del formulario usted mismo en lugar de dejar que el navegador envíe sus formularios.
En su función onSubmit , agregue la siguiente línea e.preventDefult()
const onSubmit = (e: any) => { e.preventDefault() console.log("Form Submitted"); };Su código funcionará perfectamente.