react-select 通过单击组标题添加组中的所有项目 [英] react-select add all items from group by click on group title

问题描述

反应选择

let options = [{"label": "第 1 组",选项": [{标签":项目1"，值":1|1"},{标签":Item2"，值":1|2"},{标签":Item3"，值":1|3"}]},{"label": "第 n 组",选项": [{标签":项目1"，值":2|1"},{标签":Item2"，值":2|2"}]}];<选择onChange={this.onChange}closeMenuOnSelect={false}是多的menuIsOpen={true}选项={选项}/>

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

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

<预><代码>[{"label": "第 1 组",价值": ["1|1","1|2",1|3"],选项": [{"label": "item1",值":1|1"},{"label": "item2",值":1|2"},{"label": "item3",值":1|3"}]}]

但群组不可点击

解决方案

是的，这就是 react-select 的工作原理，你不能直接点击/选择组.

但是，为了使组可点击，请在 options 数组内的对象中提供 label 和 value.

像这样

let options = [{标签:---组1---"，值:1"},{选项: [{标签:项目1"，值:1|1"...

这将使该组可点击和可选择.

您的代码的工作副本是在代码和框中

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

您可以为组编写自定义组件.通过这种方式，您可以附加 onClick 或 do 或其他类型的东西.

<选择组件={{GroupHeading: () =><div onClick={() =>console.log('我是一个群组，我可以点击.. 耶！')}>我的群组标题</div>}}onChange={onChange}

====根据评论中的要求:====

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

• 例如维护一个状态value
• 为组标签编写一个小自定义组件并附加一个 onClick 它将连接值(状态)
• 使用 react-select 的 value 属性并提供来自 state 的 value
• 编写自定义onChange 并在项目选择时更新状态，即value

我已经更新了 codeandbox 工作 代码副本(与上面相同的链接)

代码片段:

const group1Options = [{标签:项目1"，值:1|1"},{标签:项目2"，值:1|2"},{标签:项目3"，值:1|3"}];const group2Options = [{标签:项目1"，值:2|1"},{标签:项目2"，值:2|2"}];const createGroup = (groupName, options, setValue) =>{返回 {标签:(() => {返回 (
设置值(值 =>value.concat(options.filter(grpOpt => !value.includes(grpOpt))))}>{组的名字}

);})(),选项:选项};};导出默认函数 App() {const [value, setValue] = useState([]);让选项 = [createGroup("---GROUP 1---", group1Options, setValue),createGroup("---GROUP 2---", group2Options, setValue)];返回 (<div className="应用程序"><h1>Hello CodeSandbox</h1><选择//components={{GroupHeading: () =><div onClick={() =>console.log('我是一个群组，我可以点击.. 耶！')}>我的群组标题</div>}}onChange={option =>{控制台日志(选项)；返回设置值(选项)；}}closeMenuOnSelect={false}是多的menuIsOpen={true}选项={选项}价值={价值}/>

);}

react-select

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 is fired only for subitems of Group, in documentation I don't find property to set group title clickable or other options that would accomplish this, any ideas?

I also tried to add value for groups like this

[
  {
    "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"
      }
    ]
  }
]

But group is not clickable

解决方案

Yes, that's how react-select works, you can't directly be able to click/select on the group.

However, In order to make the group clickable, provide a label and value in an object inside options array.

Like this

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

This will make the group clickable and selectable.

Working copy of your code is in the codesandbox

Another info which might be useful to know is:

You can write custom component for the group. This way you can attach onClick or do or other kinds of stuff.

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

====EDIT: Based on request in the comment:====

In order to select all group items upon clicking on group label, do the following:

• maintain a state value for example
• write a little custom component for the group label and attach an onClick which will concatenate the value(state)
• use value prop of react-select and provide the value from state
• write custom onChange and update the state i.e. value upon item select

I have updated the codesandbox working copy of code (same link as above)

Code Snippet:

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>
  );
}

这篇关于react-select 通过单击组标题添加组中的所有项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！