1

创建带有变体下拉列表的产品页面的最佳方法是什么？我有一个带有变体列表的产品，例如：

[{size: "small", color: "red", material: "metal"},
{size: "small", color: "red", material: "wood"},
{size: "medium", color: "blue", material: "plastic"},
{size: "large", color: "blue", material: "metal"},
{size: "large", color: "yellow", material: "wood"}]

我所做的是创建 3 个下拉列表，一个用于尺寸，一个用于颜色，一个用于列出所有可用选项的材料。

当其中一个下拉列表发生更改时，我需要一种方法来影响其他 2 个下拉列表，以便下拉列表中只有可用的变体可用。

例如，如果用户从第一个下拉列表中选择“小”，则颜色下拉列表应仅显示红色，材质下拉列表应仅显示金属和木材。

实现这一目标的最佳方法是什么？

我在此代码框中创建了 3 个下拉列表的示例： https ://codesandbox.io/s/divine-water-vz8tv?file=/src/App.js

4

1 回答 1

2

每次选择之一的值发生变化时，您都可以收集选项。仅在重新选择主时（setSize重置时color和重置material时）完成依赖选择的重置。setColormaterial

代码沙盒

const products = [
  { size: "small", color: "red", material: "metal" },
  { size: "small", color: "red", material: "wood" },
  { size: "medium", color: "blue", material: "plastic" },
  { size: "large", color: "blue", material: "metal" },
  { size: "large", color: "yellow", material: "wood" }
];

export default function App() {
  const [size, setSize] = React.useState();
  const [color, setColor] = React.useState();
  const [material, setMaterial] = React.useState();

  const sizeOptions = products
    .map((p) => p.size)
    .filter((v, i, a) => a.indexOf(v) === i)
    .map((size) => ({ label: size, value: size }));
  const colorOptions = products
    .filter((p) => size && p.size === size.value)
    .map((p) => p.color)
    .filter((v, i, a) => a.indexOf(v) === i)
    .map((color) => ({ label: color, value: color }));
  const materialOptions = products
    .filter(
      (p) => size && p.size === size.value && color && p.color === color.value
    )
    .map((p) => p.material)
    .filter((v, i, a) => a.indexOf(v) === i)
    .map((material) => ({ label: material, value: material }));

  return (
    <div className="App">
      <Select value={size} onChange={setSize} options={sizeOptions} />
      <Select
        value={color}
        onChange={setColor}
        options={colorOptions}
        isDisabled={!size}
      />
      <Select
        value={material}
        onChange={setMaterial}
        options={materialOptions}
        isDisabled={!color}
      />
    </div>
  );
}
于 2020-08-10T07:29:22.537 回答