Quiero saber cómo hacer un botón que haga una nueva <input> cada vez que el usuario haga clic en él y quiero que su valor se agregue a una matriz.
¡Usé este código que encontré pero solo hace la primera parte!
import React from "react"; import { Button, FormInput } from "shards-react"; class Parameter extends React.Component { id = 1; state = { list: [] } item(id) { return ( // <div > // <i className="material-icons" onClick={e => this.remove(`${id}`)} >delete</i> // </div>); <FormInput className="mb-1" key={id} id={`param-${id}`} placeholder="Competetion parameters"/> ); } remove(id) { const newList = this.state.list.filter(item =>item.key !== id); this.setState({ list: newList }) } addParam = () => { const list = this.state.list; list.push( this.item(this.id) ) this.setState({ list }); this.id++; } render() { return ( <div> <Button onClick={e => this.addParam()} theme="primary">Add parameter</Button> { this.state.list.map(item => item) } </div>); } } export default Parameter;Quiero saber cómo puedo poner un grupo de valores de entrada en una matriz. React es realmente nuevo para mí. ¡Me encantaría que alguien pudiera ayudarme con esto!
Quiero saber cómo hacer un botón que haga uno nuevo cada vez que el usuario haga clic en él y quiero que su valor se agregue a una matriz y lo publique con Axios.
Se siente que hay dos preguntas en una aquí; primero es cómo lidiar con el estado (cantidad de entradas) y segundo cómo guardar la matriz.
Realmente no puedo ayudar con el segundo sin examinar cómo funciona exactamente setLoading, pero tengo una sugerencia para lidiar con el estado. Agregue cada valor de entrada como una cadena en una matriz y haga algo como esto:
document.onreadystatechange = () => { const { useState } = React; function Boxes() { const [inputs, setInputs] = useState([]); const addInput = () => { setInputs(inputs.concat("abc")); }; const changeInput = (index, value) => { const updated = [...inputs]; updated[index] = value; setInputs(updated); }; const handleAdd = () => { alert("Saving " + JSON.stringify(inputs)); }; return ( <div> <p>inputs</p> {inputs.map((input, index) => { return ( <div key={index}><input type="text" value={input} onChange={(e) => changeInput(index, e.target.value)} /></div> ); })} <button onClick={addInput}>Add new input</button> <hr /> <button onClick={handleAdd}>Add</button> </div> ); } ReactDOM.render(<Boxes />, document.querySelector("#root")); }; <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>