Javascript 在React中显示组件onClick

一般来说，我对反应和javascript都是新手。这就是问题所在

我有一个在React组件中显示的图像列表。我试图实现的是定义一个方法来处理这些图像中的任何一个的onClick方法，并将一个新的组件渲染为覆盖。这是我的密码

class Viewer extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      images : ImageList
    };

  }

  componentDidMount(){

  }
  handleClick(mediaId, event){
    event.preventDefault();
    render(){
      <MyNewComponent  mediaId=mediaId />
    }
  }

  render(){
    return (
      <div className="row">
        <div className="image-viewer">
          <ul className="list-inline">
            {this.state.images.map(function (image) {
              return (<li key={image.mediaId}><a href="#" onClick={this.handleClick.bind(image.mediaId, event)}><img src={image.src}
                                                               className="img-responsive img-rounded img-thumbnail"
                                                               alt={image.mediaId}/></a></li>);
            })}

          </ul>
        </div>
      </div>
    );
  }
}
export default Viewer;

类查看器扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 图像：图像列表 }; } componentDidMount（）{ } handleClick（mediaId，事件）{ event.preventDefault（）； render（）{ } } render（）{ 返回(

{this.state.images.map（函数（图像））{ 返回（
）； })}

); } } 导出默认查看器；

---

这显然是错误的，并引发了一系列错误。有人能给我指出正确的方向吗。

这里是如何处理

单击事件并显示覆盖图的

class Viewer extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      images : ImageList,
      mediaId : 0
    };
    // Bind `this`
    // See "Binding to methods of React class" link below
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount(){ }

  handleClick(event){
    event.preventDefault();
    // Get the value of the `data-id` attribute <a data-id="XX">
    var mediaId = event.currentTarget.attributes['data-id'].value;
    // Set the state to re render
    this.setState({ mediaId }); // ES6 shortcut
    // this.setState({ mediaId: mediaId }); // Without shortcut
  }

  render(){
    // Set a variable which contains your newComponent or null
    // See "Ternary operator" link below
    // See "Why use null expression" link below
    var overlay = this.state.mediaId ? <MyNewComponent  mediaId={this.state.mediaId} /> : null;

    return (
      <div className="row">
        <div className="image-viewer">
          { overlay }
          <ul className="list-inline">
            {this.state.images.map(image => {
              return (<li key={image.mediaId}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><img src={image.src}
                                                               className="img-responsive img-rounded img-thumbnail"
                                                               alt={image.mediaId}/></a></li>);
            }).bind(this)}

          </ul>
        </div>
      </div>
    );
  }
}
export default Viewer;

类查看器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
图片：ImageList，
mediaId:0
};
//把这个绑起来`
//请参阅下面的“绑定到React类的方法”链接
this.handleClick=this.handleClick.bind（this）；
}
componentDidMount（）{}
handleClick（事件）{
event.preventDefault（）；
//获取`数据id`属性的值）；
}).bind（这个）}

);
}
}
导出默认查看器；

---

文档

---

什么样的覆盖层？全屏的？“你需要什么样的内容？”PraneshRavi说，这是一个与图像本身大小相当的覆盖图。此覆盖必须带有表单输入和提交按钮。我需要将带有用户Id的mediaId传递给api调用。这看起来很好，但是您可以对代码进行一些解释。我真的是一个javascript领域的新手，发现自己完全不知所措。我不断得到“Uncaught TypeError:无法读取未定义”的属性“handleClick”，不知道为什么会发生这种情况。修复了错误。我必须将此

传递给map函数。把它放在这里，因为它可能会帮助其他人。我有一些文档和评论。我也解决了
这个问题，谢谢。