Question

我试图使用ReactJS和Typescript在每次点击中创建一个数组。这是我的代码：

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保留它。我该怎么办？

Answer 1

我想这就是你想要的：

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 documentation以获得更多信息。

如何创建一个与打字稿反应的数组？

1 个答案: