我有一個任務串列，里面有另一個任務（子任務）。我使用地圖列出所有任務，并有一個按鈕可以向該任務添加更多子任務。除非按下按鈕，否則輸入按鈕應該是不可見的。問題是我使用 useState 掛鉤有條件地呈現輸入，但是每當我單擊任何按鈕時，所有任務的輸入都會打開，并且應該只打開來自該特定索引的輸入。
const Task = () => {
const [openTask, setOpenTask] = useState(false);
return task.map((item, index) => {
return (
<div>
<button onClick={() => setOpenTask(!openTask)}>Add</button>
{item.name}
{openTask && <input placeholder="Add more tasks..."/>}
{item.subTask.map((item, index) => {
return (
<>
<span>{item.name}</span>
</>
);
})}
</div>
);
});
};
uj5u.com熱心網友回復：
嘗試使用陣列
const Task = () => {
const [openTask, setOpenTask] = useState([]);
const openTaskHandler = (id) => {
setOpenTask([id])
}
return task.map((item, index) => {
return (
<div>
<button onClick={() => openTaskHandler(item.id)}>Add</button>
{item.name}
{openTask.includes(item.id) && <input placeholder="Add more tasks..."/>}
{item.subTask.map((item, index) => {
return (
<>
<span>{item.name}</span>
</>
);
})}
</div>
);
});
};
uj5u.com熱心網友回復：
那是因為您將所有專案的 openTask 設定為 true。您可以創建物件并將特定 id 存盤為 true。例如。
const [openTask, setOpenTask] = useState({});
然后在按鈕 onClick 上可以設定要打開的具體 id
setOpenTask({...openTask,[`${item.name}-${index}`]:true});
然后檢查特定的 id
{openTask[`${item.name}-${index}`] && <input placeholder="Add more tasks..."/>}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/480935.html
標籤：javascript 反应
上一篇：如何使用expressjs將端點用作另一個函式中的函式
下一篇：如何顯示陣列的串列元素？