Question

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

我有一个名为Portfolio的方法，一旦用户单击Image，就需要激活模态

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

我正在尝试从投资组合功能激活模式。但是由于它不在类范围内，所以我无法访问状态。有什么办法可以做到这一点？

Answer 1

您可以将ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /var/lib/gems/2.3.0 directory.方法传递给toggle组件，然后在道具中使用它。

Portfolio />

然后在<Portfolio key={item.title} toggle={this.toggle} portfolio={item}中输入

：

Portfolio

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

1 个答案: