如何在Atlassian Forge UI Kit自定义组件中点击按钮勾选复选框V2

要实现点击按钮自动勾选“V2”复选框，你需要通过受控组件的方式管理CheckboxGroup的状态，具体修改步骤如下：

1. 补充导入useState钩子到ForgeUI的导入列表
2. 在Edit组件内定义状态变量存储复选框选中值
3. 给CheckboxGroup绑定状态的value和onChange事件
4. 在按钮的onClick函数中更新状态，将“V2”加入选中集合

修改后的完整代码：

import ForgeUI, { CustomField, CustomFieldEdit, render, Text, TextField, useProductContext, CheckboxGroup, Checkbox, Select, Option, Button, useState } from "@forge/ui";


const View = () => {
  const { extensionContext: { fieldValue } } = useProductContext();

  return (
    <CustomField>
      <Text
        content={`Hello ${fieldValue || "world"}!`}
      />
    </CustomField>
  );
};

const Edit = () => {
  // 定义状态存储选中的产品值，初始为空数组
  const [selectedProducts, setSelectedProducts] = useState([]);

  const onSubmit = values => {
      // 提交时返回选中的产品和其他表单值
      return { products: selectedProducts, ...values };
  };
  
  const onClick = () => {
    // 将V2设置为选中状态，同时保留已选中的其他选项
    setSelectedProducts(prev => {
      if (!prev.includes("V2")) {
        return [...prev, "V2"];
      }
      return prev;
    });
    // 如果需要强制勾选V2（不管之前状态），可以替换为：
    // setSelectedProducts([...new Set([...selectedProducts, "V2"])]);
  };

  return (
    <CustomFieldEdit onSubmit={onSubmit}>
      <CheckboxGroup 
        label="Products" 
        name="products"
        value={selectedProducts}
        onChange={setSelectedProducts}
      >
        <Checkbox value="V1" label="V1" />
        <Checkbox value="V2" label="V2" />
        <Checkbox value="V3" label="V3" />
      </CheckboxGroup>
      <Button text="button" onClick={onClick} />
    </ CustomFieldEdit>
  );
}

export const runView = render(
  <View/>
);

export const runEdit = render(<Edit/>)

关键修改说明： #

• useState状态管理：用于在函数组件中维护复选框的选中状态
• 受控CheckboxGroup：通过value绑定状态，onChange触发状态更新，确保组件状态与用户操作同步
• onClick逻辑：通过更新状态数组，将“V2”加入选中集合，同时保留其他已选选项（若需强制勾选可使用Set去重逻辑）

内容的提问来源于stack exchange，提问作者user1027167