0
345
VisualizaçõesManejar múltiples cuadros de entrada renderizados usando la función de mapa javascript
Estoy trabajando en una reacción en la que trato con un número dinámico de campos de entrada mientras los renderizo usando la función arr.map . Pero, ¿cómo puedo manejar el método input onChange con tantos campos de entrada?
Aquí está mi componente:
this.props.setsList.map((codeset, index) => ( <Table.Row key={codeset.code_system_id}> <Table.Cell>{index + 1}</Table.Cell> <Table.Cell>{codeset.name}</Table.Cell> <Table.Cell> <Input type='text' className='form-control' value={codeset.code} placeholder={translateText('Code')} onChange={() => this.handleCodeChange(event, index)} style={{ height: '70%' }} /> </Table.Cell> <Table.Cell> <Input type='text' className='form-control' value={codeset.description} placeholder={translateText('Code Description')} onChange={() => this.handleCodeDescriptionChange(event, index)} style={{ height: '70%' }} /> </Table.Cell> </Table.Row> Todos los campos de entrada pueden tener campos existentes o pueden estar vacíos y uno puede editarlos enviando los campos de edición a la API. ¿Cómo puedo manejar un caso así con solo 1 handleFunction ? ¿Hay alguna manera? Cualquier pista será apreciada.
En el código anterior, hay 2 cuadros de entrada con valores iniciales de la API.
1 Respostas
Responde à pergunta0
Los datos pasados a su componente deben ir directamente al estado. Luego, cada campo envía el índice de la matriz, el nombre del campo y el nuevo valor a la devolución de llamada handleChange.
import { useState } from "react"; // passed in as a prop from the parent component const data = [ { name: "foo", code: "gdfgsd" }, { name: "bar", code: "gfdsgsdfgfd" } ]; const App = ({ setsList = data }) => { const [state, setState] = useState(setsList); const handleChange = (e, i) => { const { value, name } = e.target; const newState = [...state]; newState[i] = { ...newState[i], [name]: value }; console.log(newState); setState(newState); }; return ( <div className="App"> {state.map(({ name, code }, index) => { return ( <div key={index}> <label> name {": "} <input name="name" value={name} onChange={(e) => handleChange(e, index)} /> </label> <label> code {": "} <input name="code" value={code} onChange={(e) => handleChange(e, index)} /> </label> </div> ); })} </div> ); }; export default App; 
También hay una manera de representar cada campo dinámicamente mapeando sobre la matriz y luego mapeando internamente sobre las claves de ese elemento de la matriz.
import { useState } from "react"; import { data } from "./data"; const App = ({ setsList = data }) => { const [state, setState] = useState(setsList); const handleChange = (e, i) => { const { value, name } = e.target; const newState = [...state]; newState[i] = { ...newState[i], [name]: value }; console.log(newState); setState(newState); }; return ( <table className="App"> <tbody> {state.map((item, index) => ( <tr key={index}> {Object.keys(item).map((key) => ( <td key={`${index}-${key}`}> <label> {key} {": "} <input name={key} value={item[key]} onChange={(e) => handleChange(e, index)} /> </label> </td> ))} </tr> ))} </tbody> </table> ); }; export default App;