我是 React 的新手，并在單擊 Add Bullet 按鈕時嘗試添加輸入欄位（類似于 ToDo 串列功能）。
我的組件是：
return (
<Container>
{bullet.map((text, i) => {
return (
<div className="box">
<p>Bullet {i 1}</p>
<input
name="Bullet" placeholder="Enter text"
value={text} onChange={(event) => {
setBullet([event.target.value])
}}/>
<button onClick={handleAddClick}>Add Bullet</button>
</div>
);
})}
</Container>
);
};
問題是呼叫了函式handleAddClick（通過console.log檢查），但它沒有添加新的輸入法。我正在使用狀態陣列進行更新，因此有人可以幫助我解決問題會很有幫助。
處理添加點擊：
const handleAddClick = useCallback(() => {
setBullet([
...bullet,
'Lorem Ipsum is simply dummy text'
])
}, [ bullet ]);
更新： 現在修改函式后，問題是每當我開始在輸入框中輸入時，它會立即洗掉所有其他輸入框并只保留一個。我將 event.target.value 的值傳遞給 onChange 函式。
uj5u.com熱心網友回復：
我相信您的原始handleAddClick處理程式只需要使用功能狀態更新來正確地從以前的狀態更新，而不是在范圍內關閉的任何狀態。
const handleAddClick = () => {
setBullet(bullets => [
...bullets,
'Lorem Ipsum is simply dummy text'
]);
};
為了解決更新問題，您將完全替換bullet輸入onChange處理程式中的狀態。
<input
name="Bullet"
placeholder="Enter text"
value={text}
onChange={(event) => {
setBullet([event.target.value]) // <-- replaceS the entire array!!
}}
/>
您需要的是一個處理程式，例如更新特定索引的洗掉處理程式。
const onChangeHandler = (index: number, value: string) => {
setBullet(bullets => bullets.map(
(bullet, i) => i === index ? value : bullet
)):
}
...
<input
name="Bullet"
placeholder="Enter text"
value={text}
onChange={e => onChangeHandler(i, e.target.value)}
/>
uj5u.com熱心網友回復：
您應該將回呼處理程式包裝在其中useCallback()以記住它。目前，每次渲染組件時都會定義您的函式，因此其參考值bullet是使用初始值，而不是更新后的值：
const handleAddClick = useCallback(() => {
setBullet([
...bullet,
'Lorem Ipsum is simply dummy text'
])
}, [ bullet ]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/418669.html
標籤：