Question

是否可以将OptGroup添加到Ant Design（https://ant.design/components/select/）的Select组件中的options prop中？

import React from 'react';
import { Select } from 'antd';

const Places = () => {
  function handleChange(value, objectValues) {
    console.log(value);
    console.log(objectValues);
  }
return (
 <>
    <Select
      labelInValue
      defaultValue={{ value: 'Lucy' }}
      style={{ width: 120 }}
      onChange={handleChange}
      options={[ // add OptGroup here ??
        { label: 'Jack', value: 'Jack', id: '1' },
        { label: 'Lucy', value: 'Lucy', id: '2' },
      ]}
     />
  </>
  );
  };

export default Places;

我希望将OptGroup添加到选项prop中，而不是像传统方式那样。

<Select defaultValue="lucy" style={{ width: 200 }} onChange={handleChange}>
 <OptGroup label="Manager">
  <Option value="jack">Jack</Option>
  <Option value="lucy">Lucy</Option>
 </OptGroup>
</Select>

Answer 1

实际上，是的，您可以！只需传入具有label和options属性的对象即可。像这样：

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select
      labelInValue
      defaultValue={{ value: 'Lucy' }}
      style={{ width: 120 }}
      onChange={handleChange}
      options={[
          {
            label: "Test",
            options:
            [
              { label: 'Jack', value: 'Jack', id: '1' },
              { label: 'Lucy', value: 'Lucy', id: '2' }
            ]
          }
      ]}
     />,
  mountNode,
);

这是工作中的pen

蚂蚁设计在选项prop中选择组件OptGroup

1 个答案: