javascript - 如何从 React 类外部更改 Modal 状态？

Question

我试图通过从 react 类外部更改状态来调用我的模式。但到目前为止还没有运气。我尝试了以下方法:

我有一个名为 Portfolio 的方法，一旦用户单击图像，它就需要激活模式

const Portfolio = (props) => 
<div className="col-sm-4">
    <div className="mb-2">
        <img 
        onClick={this.toggle} 
        className="card-img-top" 
        src={"/assets/imgs/project/"+props.portfolio.img_thumb} 
        alt="" />
    </div>
</div>

这是包含状态和模态的类。但我无法更改状态来激活模式。

class Project extends React.Component
{
    constructor(props, context) {
        super(props, context);
        this.state = {
            modal: false,
        }

        this.toggle = this.toggle.bind(this);
    }

    toggle() {
      this.setState({
        modal: !this.state.modal
      });
    }

    render(){
    return (
        <div className="row portfolioWrap">

       // here resides our modal which activate once modal state changed
        <div>
        <Modal 
         isOpen={this.state.modal} 
         toggle={this.toggle} 
         className={this.props.className}>
            <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
            <ModalBody>
            {this.state.gallery.map(gallery =>
              <img 
              className="card-img-top" 
              src={"/assets/imgs/project/"+gallery} alt="" />)
            }
            </ModalBody>
            <ModalFooter></ModalFooter>
        </Modal>
        </div>

    // calling portfolio method inside the loop
    {currentTodos.map(item => <Portfolio key={item.title} portfolio={item} />)}     




        </div>
    )
   }
}

我正在尝试从投资组合功能激活模式。但由于它在类范围之外，我无法访问状态。有什么办法可以实现这一点吗？

Answer 1

您可以通过toggle方法给你Portfolio组件然后从 props 中使用它。

<Portfolio key={item.title} toggle={this.toggle} portfolio={item}/>

然后在 Portfolio :

const Portfolio = (props) => 
<div className="col-sm-4">
    <div className="mb-2">
        <img 
        onClick={props.toggle} 
        className="card-img-top" 
        src={"/assets/imgs/project/"+props.portfolio.img_thumb} 
        alt="" />
    </div>
</div>