0
155
Views¿Por qué <input type='number' value={var_name}> reemplaza todos los valores en una tabla?
Estoy tratando de mapear una cantidad de elementos en una tabla y cada uno de los elementos tiene un valor específico. Cada vez que uso value={inputArrival} o value={inputBurst}, todos los valores de la columna específica se actualizan. Adjunto una captura de pantalla. ¿Cómo arreglar esto? Captura de pantalla de lo que está pasando
import React,{useState} from 'react'; import './tableEdit.css'; const EntryTable = (props) => { const entry=props.numOfEntries; const[inputArrival,SetinputArrival]=useState(''); const[inputBurst,SetinputBurst]=useState(''); function changeArrival(e) { console.log(e.target.value+"A"); /* if(!Number(e.target.value)) return; else*/ SetinputArrival(e.target.value); } function changeBurst(e) { console.log(e.target.value+"B"); SetinputBurst(e.target.value); } // console.log(entry); var ArrayEntry=[]; for(var i=1;i<=entry;i++) ArrayEntry.push( <tr key={i}> <td className='row_editContent' >P{i}</td> <td className='row_editContent'><input className='input_edit' placeholder='0' type='number' value={inputArrival} onChange={(e)=>changeArrival(e)}></input>ms</td> <td className='row_editContent'><input className='input_edit' placeholder='0' type='number' value={inputBurst} onChange={(e)=>changeBurst(e)}></input>ms</td> </tr>); return ( <div> <table className='MainTableContainer' > <thead> <tr > <th className='row_editHeading'>Process</th> <th className='row_editHeading'>Arrival Time</th> <th className='row_editHeading'>Burst Time</th> </tr> </thead> <tbody> {ArrayEntry} </tbody> </table> </div> ) } export default EntryTable
·
Juan Pablo Isaza
1 answers
Answer question0
Está utilizando los mismos estados inputArrival y inputBurst para cada entrada de fila de datos en la tabla. Actualice para que cada uno sea una matriz de cadenas, y actualice las devoluciones de llamada changeArrival y changeBurst para curry un índice para actualizar. Utilice el índice asignado para acceder al estado correcto y pase a las devoluciones de llamada onChange .
const EntryTable = (props) => { const entry = props.numOfEntries; const [inputArrival, setInputArrival] = useState(Array(entry).fill("")); const [inputBurst, setInputBurst] = useState(Array(entry).fill("")); function changeArrival(index) { return (e) => { console.log(e.target.value + "A"); setInputArrival((values) => values.map((value, i) => (i === index ? e.target.value : value)) ); }; } function changeBurst(index) { return (e) => { console.log(e.target.value + "B"); setInputBurst((values) => values.map((value, i) => (i === index ? e.target.value : value)) ); }; } // console.log(entry); const ArrayEntry = Array.from({ length: entry}).map((_, i) => ( <tr key={i}> <td className="row_editContent">P{i}</td> <td className="row_editContent"> <input className="input_edit" placeholder="0" type="number" value={inputArrival[i]} onChange={changeArrival(i)} /> ms </td> <td className="row_editContent"> <input className="input_edit" placeholder="0" type="number" value={inputBurst[i]} onChange={changeBurst(i)} /> ms </td> </tr> )); return ( <div> <table className="MainTableContainer"> <thead> <tr> <th className="row_editHeading">Process</th> <th className="row_editHeading">Arrival Time</th> <th className="row_editHeading">Burst Time</th> </tr> </thead> <tbody>{ArrayEntry}</tbody> </table> </div> ); }; 
·
Juan Pablo Isaza
Report
Answer question