0

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

我有一个名为 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>
    )
   }
}

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

4

1 回答 1

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>
于 2018-08-31T00:42:18.393 回答