处理一个输入数组-React

Question

我有一个表，我需要在其中制作一个输入元素列表。它们将有一个默认值，您可以将其值从max number(默认值)更改为0或发送此maxNumber。输入元素旁边是发送按钮。Button将从输入元素获取值并将其发送给API。下面是我的部分代码:

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>
))}

谁能帮助我如何设置valueInput为x.maxNumber -从数组，或任何建议我如何能解决这个问题没有useState。

Answer 1

您可以将带有input的表行放到一个单独的组件中，并在那里设置输入状态。然后将行id和输入值向上传递给更改时的父组件。例如

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>