如何使用 React、GraphQL、Apollo 制作多个可选择的复选框

Question

我正在使用 React、GraphQL、Apollo 制作多个可选择的复选框。

如果它被选中，我想进行查询，插入查询并取消选中，删除查询（我只想为选定/删除的项目生成查询）

现在我正在使用突变来制作它，但我遇到了一个问题，即所有内容都被删除然后插入。

我想仅为选定/删除的项目生成查询。我该如何解决？

我的代码如下。

const [updateNoteMutation] = useUpdateNoteMutation();
const updateLogic = (key: string, value: string | number | Condition[]) => {
  const noteVariables = {
     variables: {
       id: noteData.id,
       noteAttributes: {
         [key]: value,
       },
     },
  };
  updateNoteMutation(noteVariables).then(({ errors }) => {});
});

const handleCollection = (name: string, arr: Array) => { //arr：选中复选框的列表。 常量 noteArr = []; diff.map((val) => { noteArr.push({ name: val }); }); 更新逻辑（名称，noteArr）； };

updateNoteMutation

mutation UpdateNote($id: ID!, $noteAttributes: FemappNoteInput!) { femappUpdateNote（输入：{id：$id，noteAttributes：$noteAttributes}）{ 笔记 { ID 复选框列表 { 姓名 } } } }

Please let me know if there is a source code that I can refer to

Thanks for reading my question.

Answer 1

你可以试试react-select。真的很容易实现和完全可定制。 这是回购； https://github.com/JedWatson/react-select