时间戳

首页 > 解决方案 > 在选定的特定项目上设置内联组件的样式

javascript - 在选定的特定项目上设置内联组件的样式

问题描述

我希望能够为我选择的项目创建一些不同的 UI。

我正在为我选择的语句使用钩子，它工作得很好，我只是无法使样式工作。

当前的 UI - 基本引导卡。Wished UI - 选择时周围有边框的引导卡。

我的检测选择的钩子（工作正常）

const [selected, setSelected] = useState(items.one); // default value

到目前为止我试图实现的目标：

                <Card
                    onClick={() => setSelected(items.two)}
                    style={{
                        borderColor: selected ? 'black' : "none",
                    }}
                >
                </Card>
                <Card
                    onClick={() => setSelected(items.three)}
                    style={{
                        borderColor: selected ? 'black' : "none",
                    }}
                >
                </Card>
                ..................
                ..................

对于每张卡片都是相同的逻辑 - 但它不会检测到选择并且卡片总是有黑色边框。What I tried to do above is when the specific item is selected give it black border, otherwise none.

任何解决方案我怎样才能用这个实现更好的 UI/UX？我不知道为什么它不起作用。

标签： javascriptcssreactjsonclickreact-hooks

解决方案

每张卡都是相同的逻辑。所以你可以map用来渲染。我看到你items是对象，所以首先将项目转换为arrayKey：const itemsKey = Object.keys(items);

下一步：更新渲染

  {itemsKey.map((key, index) => (
    <Card
      key={index}
      data={items[key]}
      onClick={() => setSelected(key)}
      style={{
        borderColor: selected === key ? "black" : "none",
      }}
    />
  ))}

推荐阅读