Question

我有一个模态包装器，在其中有反应模式，这是一个npm模块。

在render方法中，它基于this.props.isOpen

打开

<ReactModal 
    contentLabel="modal-big"
    className="modal-big"
    isOpen={this.props.isOpen} 
    shouldCloseOnOverlayClick={true}
>
    {this.content()}
</ReactModal>

并且在this.content中我有关闭模式的按钮。但是如何改变父母的状态呢？我无法调用this.props.isOpen = false;

Answer 1

调用作为道具传递给子项的父函数并在其中设置状态

class Parent extends React.Component {
     constructor() {
         super();
         this.state = {
            open: false
         }
     }
     closeModal = () => {
          this.setState({open: false});

     }
     render() {
        return (
          <ModalComp closeModal={this.closeModal} open={this.state.open}/>
        )
     }
}

class ModalComp extends React.Component {
   content = () => {
       return (
          <button type="text" onClick={()=> this.props.closeModal()}> close</button>
       )
   }
   render() {
      // .... Modal content here
   }

}

Answer 2

您需要在父组件中定义一个函数，该函数将其状态设置为关闭模态，然后不仅传递open的prop，还传递将更改模式的函数。

class ParentComponent extends Component {
  constructor() {
    super();

    this.state = {
      open: true
    }
  }


  _closeModal = () => {
    this.setState({
      open: false
    })
  }

  render() {
    return <ChildComponent closeModal={this._closeModal}

  }
}

在你的子组件中

你刚刚执行this.props.closeModal并且它会更新父状态并关闭模态

触发父组件的状态

2 个答案: