web-dev-qa-db-ja.com

親コンポーネントからreactstrapモーダルをオープンまたはクローズにする方法

親コンポーネントボタンからreactstrapモーダルを開閉しようとしていますが、機能しません。

状態isModalOpenを子ModalExampleコンポーネントに小道具として渡しています。作成したデバッグテキストフィールドに示されているように変化しますが、モーダルが開いていないようです。

どんな助けでも大歓迎です。これがjsfiddleです： https://jsfiddle.net/67wy5nqp/

const { Button, Modal, ModalHeader, ModalBody, ModalFooter } = Reactstrap;

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <br />
        <label>
          (child) this.props.isOpen
          <input type="text" value={this.props.isOpen} />
        </label>

        <Modal
          isOpen={this.props.isModalOpen}
          toggle={this.props.toggleModalView}
          className={this.props.className}
        >
          <ModalHeader toggle={this.props.toggleModalView}>
            Modal title
          </ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.props.toggleModalView}>
              Do Something
            </Button>
            <Button color="secondary" onClick={this.props.toggleModalView}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

class SampleApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: true
    };

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

  toggle() {
    this.setState({
      isModalOpen: !this.state.isModalOpen
    });
  }

  showModal() {
    this.setState({
      isModalOpen: true
    });
  }

  render() {
    return (
      <div>
        <ModalExample
          isOpen={this.state.isModalOpen}
          toggle={this.state.isModalOpen}
        />

        <br />
        <button className="btn btn-primary" onClick={this.toggle}>
          Show Modal From Parent Component
        </button>

        <br />
        <label>
          (parent) this.state.isModalOpen:
          <input type="text" value={this.state.isModalOpen} />
        </label>
      </div>
    );
  }
}

ReactDOM.render(<SampleApp />, document.querySelector("#app"));
javascriptreactjsreactstrap
4
Hilyin

状態変数isModalOpenを、開いているかどうかを示す変数と、それを切り替えるために使用する関数の両方として渡します。代わりに、this.toggleを使用して切り替えます。

<ModalExample
  isOpen={this.state.isModalOpen}
  toggle={this.toggle}
/>

toggleModalViewコンポーネントでModalExample小道具も使用していますが、関数をtoggleとして渡しているため、代わりにthis.props.toggleを使用する必要があります。また、isModalOpenをisOpenとして渡すため、代わりにthis.props.isOpenを使用する必要があります。

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


class ModalExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modal: props.initialModalState,
            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 class SampleApp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <div>
                <ModalExample initialModalState={false} />
            </div>
        )
    }
}

**This example getting call component modal from another component**
1
Miodrag Trajanovic