如何不僅通過單擊該復選框輸入，還通過單擊包含輸入和跨度的整個按鈕來更改復選框值？
const statuses = ["Draft", "Pending", "Paid"];
const [checkedState, setCheckedState] = useState(
new Array(statuses.length).fill(false)
);
const handleCheckboxChange = (position: number) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
};
{statuses.map((status, index) => (
<button key={index}>
<input
type="checkbox"
onChange={() => handleCheckboxChange(index)}
/>
<span>{status}</span>
</button>
))}
uj5u.com熱心網友回復：
將您的handleCheckboxChange函式移動到button并使用checked屬性來input動態處理檢查取消檢查。如您所見，在checked屬性中，我像這樣動態地賦予值checked={checkedState[index]}。
import { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const statuses = ["Draft", "Pending", "Paid"];
const [checkedState, setCheckedState] = useState(
new Array(statuses.length).fill(false)
);
const handleCheckboxChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
};
return (
<>
{statuses.map((status, index) => (
<button key={index} onClick={() => handleCheckboxChange(index)}>
<input type="checkbox" checked={checkedState[index]} />
<span>{status}</span>
</button>
))}
</>
);
}
另一種方法是 - 只需使用label而不是button. 在這種情況下，您需要為標簽提供適當的樣式。
return (
<>
{statuses.map((status, index) => (
<label key={index}>
<input
type="checkbox"
onChange={() => handleCheckboxChange(index)}
checked={checkedState[index]}
/>
<span>{status}</span>
</label>
))}
</>
);
uj5u.com熱心網友回復：
您可以將處理程式放在按鈕上而不是輸入復選框上。
原因是 javascript 中的事件將從外部標記傳遞到內部標記。如果您單擊一個按鈕，則該事件將在按鈕的子項中觸發之前在按鈕中觸發。
有關詳細資訊，請參閱事件冒泡和捕獲
<button key={index} onClick={() => handleCheckboxChange(index)}>
<input
type="checkbox"
//onChange={() => handleCheckboxChange(index)}
checked={checkedState[index]}
/>
<span>{status}</span>
</button>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/506898.html
標籤：javascript 反应 打字稿
上一篇：在axios實體中使用狀態令牌