如何在没有setstate的情况下使用ReactJS获取大量输入字段的值

Question

我从API接收数据，并在行中显示数据，每行都会有一个更新按钮，以便函数知道要更新哪个id
由于我有很多行的原因，不可能为每一行设置State或useRef，有什么解决方案可以让我获得该特定id的用户输入吗
示例：

const data = [{id:1, number:0},{id:2, number:0},{id:3, number:0} ...] // a lot of data
const update=(id)=>{
// get the new number of the id and call api to update only for the certain id
}
{data && data.map(x => {
return (
<div className={`row ${x.id}`} key={x.id}>
<div className='cell'>
{x.id}
</div>
<div className={`cell number`}>
{x.number}
<input className="cellInput" value={x.number} placeholder={x.number} />
</div>

<div className='cell'>
<button onClick={(() => update(x.id))}>Update</button>
</div>
</div>
)
})}

Answer 1

你必须.

基本上，您只有两种选择：受控零部件或非受控零部件。在受控组件中，表单数据由React组件处理。另一种选择是不受控制的组件，其中表单数据由DOM本身处理。以下是受控组件的示例：

const [items, setItems] = useState([/* your data */]);
function handleChange(val, i) {
const newItems = items.slice();
newItems[i] = val;
setItems(newItems);
}
return (
<div>
{items.map((val, i) => (
<div key={i}>
<input value={val} onChange={newVal => handleChange(newVal, i)} />
<button onClick={() => {/* do something */}}>update</button>
</div>
))}
</div>
);