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

Question

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

下面是我正在尝试的。不幸的是，模态显示 targetElement 道具在 CropperModal

的 componentDidMount 函数中未定义

export default class DynamicArticleList extends React.Component {
    
    constructor(){
        super();
         this.state={
            
             targetElement: '',
            
             
        }
     
        this.showModal = this.showModal.bind(this);
        this.hideModal = this.hideModal.bind(this);
 
    }
 
    showModal(e){
        
        this.setState({
            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"/>
                   <CropperModal targetElement={this.state.targetElement}/>                   
                
                </div>
            </div>

        );
    }
}

Answer 1

这是我的做法。我基本上避免了模态组件渲染，直到处理完点击事件

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>

    );


 }
}

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

Pass clicked element's information to a modal as props - Reactjs

jsx

reactjs

react-props