如何从 React class 外部更改模态状态？

Question

我正在尝试通过从反应外部更改状态来调用我的模式 class。但到目前为止还没有运气。我尝试了以下方法：

我有一个名为 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。但是我不能改变状态来激活模态。

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

我正在尝试从 Portfolio 功能中激活模式。但由于它在 class 范围之外，我无法访问该状态。有什么办法可以做到这一点？

Answer 1

您可以将 toggle 方法传递给您的 Portfolio 组件，然后从道具中使用它。

<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>

如何从 React class 外部更改模态状态？

How to change Modal state from outside the React class?

javascript

reactjs

react-modal

react-state-management