Estoy tratando de agregar una nueva entrada al hacer clic en el botón en uno de mis componentes React. ¿Cuál es la forma más elegante de hacerlo?
Esta es una abstracción de mi código:
const addDivs = (type) => { ??? } export default function Form() { handleSubmit(e) {...} return ( <form onSubmit={handleSubmit}> <div><textarea rows="4" placeholder="Write about something here..." /></div> //New divs should go here //Adds a textarea <button onClick={() => addDivs(textarea)}>Add textarea</button> //Adds an upload field <button onClick={() => addDivs(upload)}>Add image</button> <input type="submit" value="Submit" /> </form> ); }Quiero mantener los botones debajo de las entradas.
¿Cómo es la mejor manera de hacer esto?
Mi idea es crear 2 estados, uno para cada botón, tendrán el número de divs necesarios para cada etiqueta.
const [textAreaNo,setTextAreaNo] = useState(0); const [uploadNo,setUploadNo] = useState(0); luego, después de sus botones, puede llamar a la función (addDiv), pero tendrá que crear 2 funciones diferentes para cada botón, o simplemente hacer una función y dentro de la función devolverá upload o área de textArea según el parámetro pasado.
entonces finalmente necesitas usar un map como este
{[...Array(textAreaNo)].map(e=>( <div> textbox <div> ))}y en su botón simplemente incrementaremos los estados anteriores como
<button onClick={()=> setTextAreaNo(textAreaNo+1)}>AddDivs</button>No estoy seguro de si desea poder agregar varias áreas de texto. Una forma en que lo haría es crear un elemento de estado que sepa cuántas áreas de texto necesita y luego una función que aumente este número en onClick(). También necesitará una función que devuelva el elemento del cuadro de texto. Algo como esto:
Componente de clase:
this.state = { numberOfTextAreas: 0 } const textAreas = () => { //<---------a function like this for (let i = 0; i < this.state.numberOfTextAreas; i++) { return ( <div> <textarea rows="4" placeholder="Write about sompething here..." /> </div> ); } } const addDivs = (type) => { ??? } export default function Form() { handleSubmit(e) {...} return ( <form onSubmit={handleSubmit}> <div><textarea rows="4" placeholder="Write about something here..." /></div> //New divs should go here {textAreas} //<---- Add this here. <button onClick={() => this.setState({numberOfTextAreas + 1})}>Add textarea</button> //Adds an upload field <button onClick={() => addDivs(upload)}>Add image</button> <input type="submit" value="Submit" /> </form> ); } ```Luego, solo querrá hacer lo mismo con los otros tipos que desea crear.