通过单击组标题反应选择添加组中的所有项目

Question

反应选择

let options = [
  {
    "label": "Group 1",
    "options": [
      {
        "label": "Item1", "value": "1|1"
      },
      {
        "label": "Item2", "value": "1|2"
      },
      {
        "label": "Item3", "value": "1|3"
      }
    ]
  },
  {
    "label": "Group n",
    "options": [
      {
        "label": "Item1", "value": "2|1"
      },
      {
        "label": "Item2", "value": "2|2"
      }
    ]
  }
];

 <Select
       onChange={this.onChange}
       closeMenuOnSelect={false}
       isMulti
       menuIsOpen={true}
       options={options}
  />

onChange仅针对组的子项触发，在文档中我找不到用于设置组标题可点击的属性或可以实现此目的的其他选项，有什么想法吗？

我也尝试为这样的团体增加价值

[
  {
    "label": "Group 1",
    "value": [
      "1|1",
      "1|2",
      "1|3"
    ],
    "options": [
      {
        "label": "item1",
        "value": "1|1"
      },
      {
        "label": "item2",
        "value": "1|2"
      },
      {
        "label": "item3",
        "value": "1|3"
      }
    ]
  }
]

但组不可点击

Answer 1

是的，这就是react-select工作原理，您无法直接单击/选择该组。

但是，为了使该组可单击，请在数组内的对象中提供一个labeland 。valueoptions

像这样

let options = [
  {
    label: "---GROUP 1---",
    value: "1"
  },
  {
    options: [
      {
        label: "Item1",
        value: "1|1"
       ...

这将使该组可单击和可选择。

代码的工作副本位于codesandbox中

另一个可能有用的信息是：

您可以为该组编写自定义组件。这样你就可以附加onClick或做其他类型的事情。

<Select
        components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
        onChange={onChange}

====编辑：根据评论中的请求：====

要在单击组标签时选择所有组项目，请执行以下操作：

• value例如维持一个状态
• 为组标签编写一个小的自定义组件并附加一个onClick将连接值（状态）的组件
• 使用valueprop ofreact-select并提供valuefrom 状态
• 编写自定义onChange并更新状态，value即在项目选择时

我已经更新了代码的codesandbox工作副本（与上面的链接相同）

代码片段：

const group1Options = [
  {
    label: "Item1",
    value: "1|1"
  },
  {
    label: "Item2",
    value: "1|2"
  },
  {
    label: "Item3",
    value: "1|3"
  }
];

const group2Options = [
  {
    label: "Item1",
    value: "2|1"
  },
  {
    label: "Item2",
    value: "2|2"
  }
];

const createGroup = (groupName, options, setValue) => {
  return {
    label: (() => {
      return (
        <div
          onClick={() =>
            setValue(value =>
              value.concat(options.filter(grpOpt => !value.includes(grpOpt)))
            )
          }
        >
          {groupName}
        </div>
      );
    })(),
    options: options
  };
};

export default function App() {
  const [value, setValue] = useState([]);
  let options = [
    createGroup("---GROUP 1---", group1Options, setValue),
    createGroup("---GROUP 2---", group2Options, setValue)
  ];

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Select
        // components={{GroupHeading: () => <div onClick={() => console.log('i am a group and i am clickable .. yay!')}>My Group Heading</div>}}
        onChange={option => {
          console.log(option);
          return setValue(option);
        }}
        closeMenuOnSelect={false}
        isMulti
        menuIsOpen={true}
        options={options}
        value={value}
      />
    </div>
  );
}