将点击元素的信息作为道具传递给模态-React.js

问题描述

我想要访问模态上单击项的ID等属性。如何将目标属性作为道具传递给点击时的模式。

以下是我正在尝试的。不幸的是，模式显示componentDidMount的{​​{1}}函数中未定义targetElement道具

CropperModal

解决方法

这就是我的做法。我基本上避免在处理click事件之前呈现模态组件

export default class DynamicArticleList extends React.Component {

constructor(){
    super();
     this.state={
         showing: false,targetElement: '',}
 
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);

}

showModal(e){
    
    this.setState({
        showing: true,targetElement: e.target.getAttribute("id")
    })
}

hideModal(e){
    this.setState({
        showing: false,showSource: '#',})
    
}

render() {
    return (
        <div className="wrapper container-fluid DynamicArticleList">
            <div className="width-control">
               <img src="../img/journey.jpg" onDoubleClick={this.showModal} id="Img0"/>
               {this.state.showing ? <CropperModal targetElement={this.state.targetElement}/> : null}                  
            
            </div>
        </div>

    );


 }
}