React组件中另一个文件中的React JS调用函数

debugcn 发表于 Dev

bpdg

我创建了一个函数，该函数是一个名为Modal.js文件的独立React组件，我想调用该按钮来打开Modal另一个React组件-我该如何实现？

Modal.js

class Modal extends React.Component {
  state = {
    loginOpened: false,
    signupOpened: false
  };

  openModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: true,
        signupOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        loginOpened: false,
        signupOpened: true
      });
    }
  };

  closeModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        signupOpened: false
      });
    }
  };

    render() {
      return (
          <>
              <Modal isOpen={loginOpened} onRequestClose={this.closeModal("login")}>
                <h1>Login</h1>
                <button onClick={this.openModal("signup")}>Open Signup</button>
                <button onClick={this.closeModal("login")}>Close this modal</button>
              </Modal>

              <Modal isOpen={signupOpened} onRequestClose={this.closeModal("signup")}>
                <h1>Sign Up</h1>
                <button onClick={this.openModal("login")}>Open Login</button>
                <button onClick={this.closeModal("signup")}>Close this modal</button>
              </Modal>

              <button onClick={this.openModal("login")}>Open Login</button>
              <button onClick={this.openModal("signup")}>Open Signup</button>
          </>
      );
    }
}

  export default Modal;

我想将其移动到Navigation.js因此，当单击这些按钮时，将调用模式窗口

<button onClick={this.openModal("login")}>Open Login</button>
<button onClick={this.openModal("signup")}>Open Signup</button>

巴斯蒂安·E。

实现此目的的最简单方法已结束Context。

您应该拥有的文件是：

// ModalContext.js
import {createContext} from 'react'

export default createContext()

// Root.js -> This file should be on top of your application
import React from 'react'
import ModalContext from './ModalContext'

class ModalProvider extends React.Component {
  state = {
    loginOpened: false,
    signupOpened: false
  };

  openModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: true,
        signupOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        loginOpened: false,
        signupOpened: true
      });
    }
  };

  closeModal = modalType => () => {
    if (modalType === "login") {
      this.setState({
        loginOpened: false
      });
    } else if (modalType === "signup") {
      this.setState({
        signupOpened: false
      });
    }
  };

  render(props) {
    return 
      <ModalContext.Provider value={{openModal: this.openModal, closeModal: this.closeModal}}>
        <Modal isOpen={loginOpened} onRequestClose={this.closeModal("login")}>
          <h1>Login</h1>
          <button onClick={this.openModal("signup")}>Open Signup</button>
          <button onClick={this.closeModal("login")}>Close this modal</button>
        </Modal>
        <Modal isOpen={signupOpened} onRequestClose={this.closeModal("signup")}>
           <h1>Sign Up</h1>
           <button onClick={this.openModal("login")}>Open Login</button>
           <button onClick={this.closeModal("signup")}>Close this modal</button>
        </Modal>
        {props.children}
      </ModalContext.Provider>
    )
  }
}

export default

// Anywhere where you need to control your modals
import ModalContext from './ModalContext'

class MyComponent extends React.Component {
  ...
  render(props) {
    return (
      <ModalContext.Consumer>
        {({openModal, closeModal}) => <button onClick={openModal("login")}>Open Login</button>}
      </ModalContext.Consumer>
    )
  }
}

您可以在此处查看更多有关上下文的信息

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。