为了账号安全,请及时绑定邮箱和手机立即绑定

如何在反应中使用类型脚本创建数组?

如何在反应中使用类型脚本创建数组?

慕侠2389804 2022-09-23 16:43:05

我试图在每次单击时使用 ReactJS 和类型脚本创建一个数组。这是我的代码:


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>

    )

}

我想构建一个这样的数组 [1, 2, 3, ...]在每次单击中获取标记的 ID 并将其与 .我该怎么做?setSelected


查看完整描述

1 回答

?
波斯汪

TA贡献1487条经验 获得超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>

  );

};

当您选中该复选框时,其ID将添加到选择状态。如果取消选中,该 ID 将被删除。


代码中的问题是你试图析构id,这是一个数字,而实际上你必须析构前一个数组,然后添加id。这可以很容易地传递给将接收先前状态并返回新状态的函数。setSelect


setSelected(prev => [...prev, id]);


有关详细信息,请查看 React 文档。


查看完整回答
反对 回复 6天前
  • 1 回答
  • 0 关注
  • 5 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信