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

【问题标题】：How to get the value of a lot of input field using ReactJS without setstate如何在没有 setstate 的情况下使用 ReactJS 获取大量输入字段的值
【发布时间】：2022-01-19 05:52:38
【问题描述】：

我从 API 接收数据，并按行显示数据，每一行都会有一个更新按钮，以便函数知道要更新哪个 id。
由于我有很多行，因此无法为每一行设置 setState 或 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>
                    )
                })}

【问题讨论】：

标签： reactjs input

【解决方案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>
);

【讨论】：