1 回答

TA貢獻(xiàn)1811條經(jīng)驗 獲得超4個贊
我想這就是你想要的:
const FormTags: React.FC = () => {
const [selected, setSelected] = React.useState<number[]>([]);
const handleTag = (e: React.FormEvent<HTMLInputElement>) => {
const id: number = +e.currentTarget.value;
const { checked } = e.currentTarget;
if (checked) {
setSelected(prev => [...prev, id]);
} else {
setSelected(prev => prev.filter(item => item !== id));
}
};
return (
<form>
{tags &&
tags.map((tag: any) => (
<input
checked={selected.includes(tag.id)}
type="checkbox"
value={tag.id}
onClick={handleTag}
/>
))}
</form>
);
};
當(dāng)您選中該復(fù)選框時,其ID將添加到選擇狀態(tài)。如果取消選中,該 ID 將被刪除。
代碼中的問題是你試圖析構(gòu)id,這是一個數(shù)字,而實際上你必須析構(gòu)前一個數(shù)組,然后添加id。這可以很容易地傳遞給將接收先前狀態(tài)并返回新狀態(tài)的函數(shù)。setSelect
setSelected(prev => [...prev, id]);
有關(guān)詳細(xì)信息,請查看 React 文檔。
添加回答
舉報