如何通过父组件按钮点击触发Reactstrap的Modal弹窗

核心逻辑是将Modal的显隐状态提升到父组件统一管理，子组件改为受控组件，通过props接收状态和切换方法即可，具体改造如下：

1. 改造SubmitConfirmation子组件 #

移除组件内部维护的modal状态和toggle方法，改为从父组件接收对应参数：

import React from 'react';
import { Button, Modal, ModalFooter, ModalHeader, ModalBody } from 'reactstrap';

class SubmitConfirmation extends React.Component {
  render() {
    // 从props接收显隐状态、切换方法、自定义类名
    const { isOpen, toggle, fade, className } = this.props;
    return (
      <div>
        {/* 移除子组件内部的触发按钮 */}
        <Modal isOpen={isOpen} toggle={toggle} fade={fade} className={className}>
          <ModalHeader toggle={toggle}>Modal title</ModalHeader>
          <ModalBody></ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={toggle}>
              Do Something
            </Button>{' '}
            <Button color="secondary" onClick={toggle}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default SubmitConfirmation;

2. 改造SampleApp父组件 #

父组件新增Modal相关状态和切换方法，引入子组件并传递对应props，按钮绑定切换方法即可：

import React from 'react';
import { Button } from 'reactstrap';
import SubmitConfirmation from './SubmitConfirmation'; // 引入子组件路径根据实际调整

export default class SampleApp extends React.Component {
    constructor(props) {
        super(props);
        // 父组件维护Modal显隐状态
        this.state = {
          modalOpen: false,
          fade: true
        }
        this.toggle = this.toggle.bind(this);
    }

    // 父组件实现Modal切换方法
    toggle() {
      this.setState({
        modalOpen: !this.state.modalOpen,
        fade: !this.state.fade
      })
    }

    render() {
        return (
            <div>
                <Button
                  color="primary"
                  size="sm"
                  style={{ width: '100%' }}
                  onClick={this.toggle} 
                >
                  Submit
                </Button>
                {/* 引入Modal子组件，传递对应props */}
                <SubmitConfirmation 
                  isOpen={this.state.modalOpen}
                  fade={this.state.fade}
                  toggle={this.toggle}
                />
            </div>
        )
    }
}

改造完成后点击父组件的Submit按钮即可正常唤起Modal，Modal内部的关闭、确认按钮也能正常关闭弹窗。

内容的提问来源于stack exchange，提问作者sambit