Tengo una tabla donde necesito hacer una lista de elementos de entrada. Tendrán un valor predeterminado y puede cambiar su valor de número máximo (valor predeterminado) a 0 o enviar este número máximo. Al lado de los elementos de entrada está el botón de enviar. El botón obtendrá valor del elemento de entrada y lo enviará a la API. Aquí está parte de mi código:
const [valueInput,setValueInput]=React.useState(0); {array.map((x) => ( <TableRow key={x.id} > <TableCell>{x.maxNumber}</TableCell> <TableCell> <input key={x.id} value ={valueInput} onChange={ event => { setValueInput(event.target.value); parseInt(event.target.value,valueInput) }} type="number" min="0" max= {x.maxNumber} /> <IconButton key={x.id} onClick={() => { team.setTeamNumber(x.id,valueInput); }}> <Check /> </IconButton> </TableCell> </TableRow> ))}¿Alguien puede ayudarme a establecer valueInput para que sea x.maxNumber, desde la matriz, o algún consejo sobre cómo puedo resolver esto sin useState?
Puede colocar la fila de la tabla con entrada en un componente separado y tener el estado de entrada allí. Luego pase la identificación de la fila y el valor de entrada al componente principal en el cambio. Por ejemplo
function TableRow({ id, inputValue, onInputChange }) { const [inputVal, setInputVal] = React.useState(inputValue); function handleInputChange(e) { setInputVal(e.target.value); onInputChange(id, e.target.value); } return ( <tr> <td style={{ 'border': '1px solid black' }}>{inputValue}</td> <td style={{ 'border': '1px solid black' }}> <input type="number" value={inputVal} onChange={handleInputChange} /> </td> </tr> ); } function Table() { const rowsArr = [ { id: '123', maxNum: 1 }, { id: '456', maxNum: 2 } ]; function handleInputChange(inputId, inputValue) { console.log(`Input with id ${inputId} has value ${inputValue}`); } return ( <div> <table style={{ 'border': '1px solid black' }}> <tbody> {rowsArr.map((x) => <TableRow key={x.id} id={x.id} inputValue={x.maxNum} onInputChange={handleInputChange} />)} </tbody> </table> </div> ); } function App() { return ( <div> <Table /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ); <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>