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

Posted 2023-03-23

【中文标题】通过单击父组件中的不同按钮打开模式

【英文标题】：Opening modal from click of a different button from parent component

【发布时间】：2021-12-03 11:13:52

【问题描述】：

我对反应还很陌生，并且遇到了问题。我正在使用 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>
        )
    

如何从父组件调用按钮：

【问题讨论】：

您是否在父级“SampleApp”中使用“SubmitConfirmation”？它不包含在问题中。

【参考方案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;

【参考方案2】：

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

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

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

【讨论】：

不，我没有收到关于添加道具的弹出窗口我希望在单击父组件中的按钮时可以看到模态我该怎么做？