javascript - 按项目 ID 添加 className onClick

Question

当然，这很简单，但我看不出我哪里出了问题。

我正在尝试将 className onClick 添加到 data.map 的列表中，请注意 onClick > 我只希望单击的 selectedId 添加 className

这就是我现在的位置

class Grid extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      selectedId: null,
    };
  }

  handleClick = selectedId => {
    this.setState({
      selectedId,
    });
  };

  render() {
    const childElements = this.props.amenitiesData.edges.map(
      ({ node: amenity }) => {
        const isActive = amenity.id === this.state.selectedId;
        const showCopy = isActive ? 'showCopy' : '';
        return (
          <div key={amenity.id} className="grid-item">
            <div className={`copy-wrapper ${showCopy}`}>
              <div className="expand-button">
                <a
                  href="#"
                  onClick={() => this.handleClick(amenity.id)}
                >
                  ...
                </a>
              </div>
            </div>
          </div>
        );
      }
    );

    return (
      <Wrapper>
        {childElements}
      </Wrapper>
    );
  }
}

问题是，当我单击任何给定项目时，不会添加 showCopy 的 className 。

这是amenity.id的当前数据结构。从 parent 作为 const FacilitiesData = data.allContentfulAmenities;

传递

请注意，列表中每一项的数据都是正确的，零错误。

{
"data": {
    "allContentfulAmenities": {
      "edges": [
        {
          "node": {
            "id": "8e9e933d-0395-5867-9e30-1c46726766f2"
          }
        },
        {
          "node": {
            "id": "4e04401c-5bdd-5174-8a2c-ea1fc36c0cc4"
          }
        },
        {
          "node": {
            "id": "ce89e346-8136-5afa-966b-6eb7443d9272"
          }
        },
        {
          "node": {
            "id": "7a85ee22-6ec5-5a53-9e60-44012ad24130"
          }
        },
        {
          "node": {
            "id": "f56e28bb-e1ff-5b59-be3a-1fde9333c79d"
          }
        },
        {
          "node": {
            "id": "078753ed-e6b0-5770-9ba5-6cb025c3aa5a"
          }
        },
        {
          "node": {
            "id": "a48ad8df-d084-550b-91e9-e4804308c336"
          }
        }
      ]
    }
  }
}

Answer 1

在渲染中执行此操作。

render() {
  const childElements = this.props.amenitiesData.edges.map(({ node: amenity }) => {
    return (
      <div key={amenity.id} className="grid-item">
        <div className={`
           copy-wrapper 
           ${amenity.id === this.state.selectedIdshowCopy ? showCopy' : ''}
        `}>
          <div className="expand-button">
            <a
              href="#"
              onClick={() => this.handleClick(amenity.id)}
            >
              ...
            </a>
          </div>
        </div>
      </div>
    );
  }
);

以前的问题是，一旦您的 selectedId 与您的 amenity.id 匹配，您将 selectedIdshowCopy 切换为 true，最终添加了“showCopy” 到你的每一个项目.map()`