通过单击父组件中的不同按钮打开模式

Question

我对反应还很陌生，并且遇到了问题。我正在使用 reactstrap 在单击按钮时调用模态。在 reactstrap 文档中，通过单击模态组件中的按钮调用模态，如下所示：

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

class SubmitConfirmation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      fade: true,
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal,
      fade: !this.state.fade,
    });
  }

  

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>
          TOGGLE
        </Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} fade={this.state.fade} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody></ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>
              Do Something
            </Button>{' '}
            <Button color="secondary" onClick={this.toggle}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default SubmitConfirmation;

我想通过单击父组件中的按钮来调用模态框我该怎么做？

export default class SampleApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <div>
                <Button
              
              color="primary"
              size="sm"
              style={{ width: '100%' }}
              onClick={this.toggle} 
              Submit
            </Button>
            </div>
        )
    }
}

如何从父组件调用按钮：

Answer 1

您需要将状态移动到父组件才能获得此功能，

Parent Component:

import React from "react";
import { Button } from "reactstrap";
import Child from "./Child";

export default class SampleApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { modal: false, fade: true };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({
      modal: !this.state.modal,
      fade: !this.state.fade
    });
  }

  render() {
    return (
      <>
        <Button
          color="primary"
          size="sm"
          style={{ width: "100%" }}
          onClick={this.toggle}
        >
          Open
        </Button>

        <Child
          modal={this.state.modal}
          toggle={this.toggle}
          fade={this.state.fade}
        />
      </>
    );
  }
}

Child Component

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

class SubmitConfirmation extends React.Component {
  render() {
    return (
      <Modal
        isOpen={this.props.modal}
        toggle={this.props.toggle}
        fade={this.props.fade}
        className={this.props.className}
      >
        <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
        <ModalBody></ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={this.toggle}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={this.toggle}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    );
  }
}

export default SubmitConfirmation;

Answer 2

您好像忘记添加 this.props.toggle

<div>
                <Button
              
              color="primary"
              size="sm"
              style={{ width: '100%' }}
              onClick={this.props.toggle} 
              Submit
            </Button>
            </div>

由于您通过 props 传递切换功能，因此该函数属于组件的 this.props 属性，就像您通过 props 传递给子组件的任何其他属性一样