如何在 React 的 .map() 函数中切换单个元素的 css 类

Question

我有一个 .map() 函数，我在其中迭代数组和渲染元素，如下所示：

      {options.map((option, i) => (
        <TachyonsSimpleSelectOption
          options={options[i]}
          key={i}
          onClick={() => this.isSelected(i)}
          selected={this.toggleStyles("item")}
        />

我正在切换所选元素的状态，如下所示：

isSelected (i) {
    this.setState({ selected: !this.state.selected }, () => { console.log(this.state.selected) })
}

使用 switch 语句更改样式：

  toggleStyles(el) {
    switch (el) {
      case "item":
        return this.state.selected ? "bg-light-gray" : "";
        break;
    }
  }

然后在我的toggleStyles方法中将它作为道具传递给TachyonsSimpleSelectOption组件的 className 。

问题

该类正在为数组中的所有项目切换，但我只想定位当前单击的项目。

链接到沙盒。

我在这里做错了什么？

Answer 1

您selected错误地使用了状态。

在您的代码中，要确定它是否被选中，您取决于该状态，但您没有指定当前选中了哪些项目。

您可以存储当前选择的索引，而不是保存布尔状态，以便仅影响指定的项目。

这可能是一个粗略的答案，但我希望我能给你一些想法。

在你的渲染上：

{options.map((option, i) => (
  <TachyonsSimpleSelectOption
    options={options[i]}
    key={i}
    onClick={() => this.setState({ selectedItem: i })}
    selected={this.determineItemStyle(i)}
   />
))}

在将确定selected道具值的函数上：

determineItemStyle(i) {
  const isItemSelected = this.state.selectedItem === i;
  return isItemSelected ? "bg-light-gray" : "";
}

希望这个答案能给你一些灵感