我試圖弄清楚如何設定一個可以在使用 .map 功能時獨立禁用的按鈕。因此，每當單擊按鈕時，我都會創建一個狀態，它會禁用該特定按鈕。但是，它只會禁用所有我不想要的按鈕。有沒有辦法讓按鈕有自己的點擊事件，可以根據索引禁用？
const [click, setClick] = useState(false);
const array = ["item 1", "item 2", "item 3"];
const disableClick = () => {
setClick(true);
};
return (
<div className="App">
{array.map((item) => (
<div>
<h2>{item}</h2>
{!click ? (
<button onClick={disableClick}>CLICK {item}</button>
) : (
<button disabled>Button clicked</button>
)}
</div>
))}
</div>
);
uj5u.com熱心網友回復：
將點擊處理程式和 useState 移動到單獨的組件中。
const ButtonView = (textContent) => {
const [disabled, setDisabled] = useState(false);
const onClick = () => {
setDisabled(true);
};
if (disabled) {
return <button disabled={disabled}>Button clicked</button>;
}
return <button onClick={onClick}>CLICK {textContent}</button>;
};
export const View = () => {
const array = ["item 1", "item 2", "item 3"];
return (
<div className="App">
{array.map((item, key) => (
<div key={key}>
<h2>{item}</h2>
<ButtonView textContent={item} />
</div>
))}
</div>
);
};
uj5u.com熱心網友回復：
Disable 需要一個引數，你可以提供它
<button disabled={click? true:false} >Button clicked</button>
有沒有辦法讓按鈕有自己的點擊事件，可以根據索引禁用？
是的，如何？除了將點擊狀態設定為 true 或 false，我們可以將其設定為包含按鈕的名稱， const [disabledBtn, setDisabledBtn] = useState("item 1");然后我們可以將其與地圖中的專案進行比較。
<button disabled={disabledBtn == item ? true:false} >Button clicked</button>
此代碼默認禁用第一個按鈕來渲染按鈕，如果用戶單擊其他可用按鈕之一，它將觸發重新渲染并且該 btn 將被禁用。您應該為子組件添加一個鍵以保持渲染之間的唯一性。
此代碼段應回答您的問題
const [disabledBtn, setDisabledBtn] = useState("item 1");
const array = ["item 1", "item 2", "item 3"];
const handleDisableClick = (item) => {
setDisabledBtn(item);
};
return (
<div className="App">
{array.map((item, idx) => (
<div key={idx}>
<h2>{item}</h2>
<button
disabled={disabledBtn == item ? true : false}
onClick={() => handleDisableClick(item)}
>
Button clicked
</button>
</div>
))}
</div>
);
uj5u.com熱心網友回復：
您可以將按鈕存盤為物件陣列，click每個物件都有一個狀態，如下所示：
const buttons = [
{
name: 'item1',
click: false
},
{
name: 'item2',
click: false
},
{
name: 'item3',
click: false
}
]
const [buttons, setClick] = useState(false);
const disableClick = (e) => {
//here put a modified copy of the buttons object according to the user's action
setClick();
};
return (
<div className="App">
{array.map((item) => (
<div>
<h2>{item.name}</h2>
{!item.click ? (
<button onClick={disableClick(item.name)}>CLICK {item.name}</button>
) : (
<button disabled>Button clicked</button>
)}
</div>
))}
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466631.html
標籤：javascript 反应 使用状态