0
316
Vistas¿Cómo puedo acceder a la clave usando el valor en ReactJs?
Estoy siguiendo un tutorial de reactJS de Udemy y estaba probando algo por mi cuenta.
Proyecto: este es un proyecto simple donde puedo agregar o eliminar objetivos 
Lo que quiero agregar extra es que quiero borrar el campo de texto de entrada cuando hago clic en el botón Enviar (Agregar objetivo). Y soy capaz de hacerlo, pero creo que hay un problema.
Todo el código
import React, { useState } from "react"; import Button from "../../UI/Button/Button"; import style from "./CourseInput.module.css"; const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(""); const [isValid, setIsValid] = useState(true); const goalInputChangeHandler = (event) => { setEnteredValue(event.target.value); if (enteredValue.trim().length > 0) { setIsValid(true); } console.log("=>" + enteredValue); }; const formSubmitHandler = (event) => { event.preventDefault(); if (enteredValue.trim().length === 0) { setIsValid(false); return; } props.onAddGoal(enteredValue); // empty the inputbar and reset state (enteredValue) console.log(event); event.target[0].value = ""; // the main setEnteredValue(""); // two lines. }; return ( <form onSubmit={formSubmitHandler}> <div className={`${style["form-control"]} ${!isValid && style.invalid}`}> <label>Course Goal</label> <input type="text" onChange={goalInputChangeHandler} /> </div> <Button type="submit">Add Goal</Button> </form> ); }; export default CourseInput;como puede ver en el código anterior, estoy accediendo al campo de entrada a través de eventos de formulario.
Accedí al campo de entrada a través del número de índice que creo que está codificado. En el futuro, si el número de elementos de formulario aumenta/disminuye, existe la posibilidad de que el número de índice cambie. entonces lo que quiero hacer es acceder al valor de entrada sin usar el índice. ¿Es eso posible? (Sé que lo es), y ¿cómo lo hago?
3 Respuestas
Responde la pregunta0
Es suficiente agregar value={enteredValue} al campo de entrada y establecerlo en una cadena vacía después de enviar el formulario. Además, si tiene algún otro campo de input , puede probar event.target.reset() .
Así que prueba esto:
import React, { useState } from "react"; // import styled from "styled-components"; import Button from "../../UI/Button/Button"; import style from "./CourseInput.module.css"; const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(""); const [isValid, setIsValid] = useState(true); const goalInputChangeHandler = (event) => { setEnteredValue(event.target.value); if (enteredValue.trim().length > 0) { setIsValid(true); } console.log("=>" + enteredValue); }; const formSubmitHandler = (event) => { event.preventDefault(); if (enteredValue.trim().length === 0) { setIsValid(false); return; } props.onAddGoal(enteredValue); // empty the inputbar and reset state (enteredValue) setEnteredValue(""); event.target.reset(); }; return ( <form onSubmit={formSubmitHandler}> <div className={`${style["form-control"]} ${!isValid && style.invalid}`}> <label>Course Goal</label> <input type="text" value={enteredValue} onChange={goalInputChangeHandler} /> </div> <Button type="submit">Add Goal</Button> </form> ); }; export default CourseInput;0
Puede usar Refs para lograr esto:
function MiComponente() {
const textInput = React.useRef(null); const formSubmitHandler = (event) => { event.preventDefault(); if (enteredValue.trim().length === 0) { setIsValid(false); return; } props.onAddGoal(enteredValue); // empty the inputbar and reset state (enteredValue) console.log(event); textInput.current.value = ""; }; // other code return <input type="text" onChange= {goalInputChangeHandler} ref={textInput} />}
0
Si está trabajando con la acción onSubmit de un formulario y tiene el evento onSubmit , puede restablecer el formulario directamente.
const formSubmitHandler = (event) => { event.preventDefault(); if (enteredValue.trim().length === 0) { setIsValid(false); return; } props.onAddGoal(enteredValue); setEnteredValue(""); event.target.reset(); // <-- calls form's reset action }; const CourseInput = (props) => { const [enteredValue, setEnteredValue] = React.useState(""); const [isValid, setIsValid] = React.useState(true); const goalInputChangeHandler = (event) => { setEnteredValue(event.target.value); if (enteredValue.trim().length > 0) { setIsValid(true); } }; const formSubmitHandler = (event) => { event.preventDefault(); if (!enteredValue.trim().length) { setIsValid(false); return; } props.onAddGoal(enteredValue); setEnteredValue(""); event.target.reset(); }; return ( <form onSubmit={formSubmitHandler}> <div> <label>Course Goal</label> <input type="text" onChange={goalInputChangeHandler} /> </div> <button type="submit">Add Goal</button> </form> ); }; const rootElement = document.getElementById("root"); ReactDOM.render( <CourseInput onAddGoal={(val) => console.log(val)} />, rootElement ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root" />