reactjs - 如何明智地显示尺寸颜色？

Question

我有颜色和大小，但在这里我想显示数据条件库。当我单击颜色时，然后显示该颜色的尺寸数据。如何解决这个问题。

在这里，我现在有黑色和绿色两种颜色，当我单击黑色时显示该尺寸，当我单击绿色时显示该尺寸数据

标签： reactjs

Answer 1

我做了一些像你的数组这样的例子并提出了一个解决方案希望这对你有用

活生生的例子 -这里

回答更新 - 我用单选按钮更新了这个例子

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

  const data = [
    {
      color: { id: 1, colorName: "black" },
      size: [
        {
          colorSize: "small "
        },
        {
          colorSize: "medium "
        },
        {
          colorSize: "large "
        }
      ]
    },
    {
      color: { id: 2, colorName: "red" },
      size: [
        {
          colorSize: "Large"
        },
        {
          colorSize: "Extra large"
        }
      ]
    }
  ];

  console.log(size);
  const handleBtn = (e) => {
    const id = e?.target.id;
    setSize(data[id]?.size);
  };

  return (
    <div className="App">
      <div className="main-dev">
        {data.map((item, i) => (
          <button id={i} onClick={(e) => handleBtn(e)}>
            {item?.color?.colorName}
          </button>
        ))}
      </div>

      <div>
        <h4>Size</h4>
        {size?.length ? (
          <>
            {size.map((item, i) => (
              <p>{item?.colorSize}</p>
            ))}
          </>
        ) : (
          "Click Button to see sizes"
        )}
      </div>
    </div>
  );
}