时间戳

首页 > 解决方案 > 在 ReactJS 中使用 optgroup 进行选择

reactjs - 在 ReactJS 中使用 optgroup 进行选择

问题描述

我现在有以下数据：

[
    {
        "value": "G1-1",
        "text": "One",
        "optgroup": "Group 1
    },
    {
        "value": "G1-2",
        "text": "Two",
        "optgroup": "Group 1"
    },
    {
        "value": "G1-3",
        "text": "Three",
        "optgroup": "Group 1"
    },
    {
        "value": "G1-4",
        "text": "Four",
        "optgroup": "Group 1"
    },
    {
        "value": "G2-1",
        "text": "One",
        "optgroup": "Group 2"
    },
    {
        "value": "G2-2",
        "text": "Two",
        "optgroup": "Group 2"
    },
    {
        "value": "G2-3",
        "text": "Three",
        "optgroup": "Group 3"
    },
    {
        "value": "G2-4",
        "text": "Four",
        "optgroup": "Group 4"
    }
]

我将这些数据作为选项传递到我创建的一个简单下拉组件中，如下所示：

const SelectInputRound = ({defaultOption, name, value, onChange, options}) => {
    return (
        <select
            id={name}
            className="inputSelectRound form-control override-fc"
            name={name}
            value={value}
            onChange={onChange}>
            <option className="defaultOption" value="">{defaultOption}</option>
            {
                options.map((option) => {
                    return <option key={option.value} value={option.value}>{option.text}</option>;
                })
            }
        </select>
    );
};

我现在的问题是我不确定如何对我的选项进行分组并将其传递给我的控件，以便我可以让 optgroups 显示在我的组件中。

标签： reactjs

解决方案

我现在的问题是我不确定如何对我的选项进行分组并将其传递给我的控件，以便我可以让 optgroups 显示在我的组件中。

在将数据传递给您的Dropdown组件之前，您可以先对其进行转换以对数据进行相应的分组。例如，像这样。

const options = [
  {
    value: "G1-1",
    text: "One",
    optgroup: "Group 1"
  },
  {
    value: "G2-2",
    text: "Two",
    optgroup: "Group 2"
  },
  {
    value: "G2-3",
    text: "Three",
    optgroup: "Group 3"
  },
  {
    value: "G2-4",
    text: "Four",
    optgroup: "Group 4"
  }
];
const groupedOptions = {};
options.forEach(option => {
  if (!groupedOptions[option.optgroup]) groupedOptions[option.optgroup] = [];
  groupedOptions[option.optgroup].push({
    value: option.value,
    text: option.text
  });
});
console.log(groupedOptions);

但是，您还必须修改您的Dropdown组件，以便它不应期望options作为其中一个props，而是应该期望一组选项。

const renderOptions = options => {
  return options.map(option => {
    return (
      <option key={option.value} value={option.value}>
        {option.text}
      </option>
    );
  });
};

const SelectInputRound = ({
  defaultOption,
  name,
  value,
  onChange,
  groupedOptions
}) => {
  return (
    <select
      id={name}
      className="inputSelectRound form-control override-fc"
      name={name}
      value={value}
      onChange={onChange}
    >
      {Object.keys(groupedOptions).map((group, index) => {
        return (
          <optgroup key={index} label={group}>
            {renderOptions(groupedOptions[group])}
          </optgroup>
        );
      })}
    </select>
  );
};

请参阅此处的工作示例。

推荐阅读