Javascript 按项目id单击时添加类名

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

我试图将

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>
    );
  }
}

---

您需要更换

您可以通过检查元素来查看反映的更改。
在渲染中执行此操作

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>
    );
  }
);

render（）{
const childElements=this.props.amentiesdata.edges.map（{node:amentity}）=>{
返回(
在这里它似乎工作得很好，我对你的示例进行了修改：你确定你的
onClick
被触发了吗？尝试输出
ament.id
和
this.state。选择edid
到你的渲染函数中。另外，在
onClick
中，你应该添加
e.preventDefault（）
防止默认浏览器行为移动到屏幕顶部。在渲染功能中输出到控制台*谢谢@inostia。输出
此状态。selectedId
返回为
null
，而
amentity.id
返回所有
id
的列表。奇怪的是，你的小提琴可以工作，而我的应用程序可以不是。干杯。我想也许可以看看我作为
道具
传递给
网格
的数据结构。考虑到你在网格渲染函数中对其进行分解的方式，这就是我希望看到的数据结构。好的luckCheers伙计。我的第一个想法是数据，但看看你的小提琴，结构是准确的。谢谢你这是错误的。如果在
标记中定义了
href=#
默认浏览器行为是滚动到窗口顶部，或滚动到与锚定匹配的元素id，而不是刷新页面。为了防止添加
e.preventDefault（）
。不要使用anchor和e.prevetndefault。如果你看到react docs，最好的做法是综合绑定你的听众，这被认为是反模式react。如果你否决了这一点，我没有问题。但我仍然建议不要使用它。我希望这会对你有所帮助。那么为什么我会发现？我们有更好的方法，因为我们有更好的方法n es6和babel 7。我们不需要深入研究。React只是js，我们可以像在基本html中一样做任何事情。但是react@16提供此类功能，因此不要手动执行此操作。
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>
    );
  }
);