第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在反應(yīng)中使用類型腳本創(chuàng)建數(shù)組?

如何在反應(yīng)中使用類型腳本創(chuàng)建數(shù)組?

慕俠2389804 2022-09-23 16:43:05
我試圖在每次單擊時使用 ReactJS 和類型腳本創(chuàng)建一個數(shù)組。這是我的代碼:const FormTags: React.FC = () => {     const [selected, setSelected] = React.useState<[]>([])     const handleTag = (e: React.FormEvent<HTMLInputElement>) => {             let id: number = +e.currentTarget.value             //working, show me each id             console.log(id)             // not working             setSelected([...id]) // error here             // Argument of type 'number' is not assignable to parameter of type              // 'SetStateAction<[]>'.     }     //retrieve tags working well, show me all list tags     return (        <form>            {tags && tags.map(tag: any) => (                <label key={tag.id}>                    <input type="checkbox" value={tag.id} onClick={handleTag}/>                </label>            )}       </form>    )}我想構(gòu)建一個這樣的數(shù)組 [1, 2, 3, ...]在每次單擊中獲取標(biāo)記的 ID 并將其與 .我該怎么做?setSelected
查看完整描述

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 文檔。


查看完整回答
反對 回復(fù) 2022-09-23
  • 1 回答
  • 0 關(guān)注
  • 89 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號