React：状態変数を使用して別のコンポーネントから関数を実行するにはどうすればよいですか？

私はこの無料のコンポーネントを持っています：

私のLoginForm：

import React, { Component } from "react";
import { Pane, TextInputField, Checkbox, Button } from "evergreen-ui";
import { validateEmail, validatePassword } from "./FormValidator";

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      passwordErr: {
        status: false,
        value: ""
      },
      emailErr: {
        status: false,
        value: ""
      },
      email: "",
      password: "",
      CheckBoxchecked: false
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleCheckbox = this.handleCheckbox.bind(this);
  }

  handleEmailInput = e => {
    const email = e.target.value;
    this.setState({ email: email });
  };

  handlePasswordInput = e => {
    const password = e.target.value;
    this.setState({ password: password });
  };

  handleCheckbox() {
    this.setState({
      CheckBoxchecked: !this.state.CheckBoxchecked
    });
  }

  handleSubmit() {
    if (this.checkFormStatus()) {
      alert("Form OK");
    }
  }

  checkFormStatus() {
    // form validation middleware
    const { email, password } = this.state;
    const emailErr = validateEmail(email);
    const passwordErr = validatePassword(password);

    if (!emailErr.status && !passwordErr.status) {
      return true;
    } else {
      this.setState({
        emailErr,
        passwordErr
      });
      return false;
    }
  }

  render() {
    return (
      <Pane padding={15}>
        <TextInputField
          tabIndex={0}
          required
          isInvalid={this.state.emailErr.status}
          validationMessage={
            this.state.emailErr.status ? this.state.emailErr.value : false
          }
          onChange={this.handleEmailInput}
          value={this.state.email}
          appearance="neutral"
          type="email"
          label="Your email-address"
          inputHeight={36}
          //description="We’ll need your email-address to create an new account"
        />
        <TextInputField
          required
          validationMessage={
            this.state.passwordErr.status ? this.state.passwordErr.value : false
          }
          isInvalid={this.state.passwordErr.status}
          onChange={this.handlePasswordInput}
          value={this.state.password}
          appearance="neutral"
          label="Your Password"
          type="password"
          inputHeight={36}
          //description="Create a secure password to protect your account"
        />
        <Checkbox
          label="Keep me logged in"
          checked={this.state.CheckBoxchecked}
          onChange={this.handleCheckbox}
        />
      </Pane>
    );
  }
}
export default LoginForm;

私のエクスポートLoginFormButton：

export class LoginFormButton extends Component {

  render() {
    return (
      <Button
        appearance="primary"
        marginLeft={8}
        marginRight={16}
        intent="success"
        onClick={} //How can i call handleSubmit() from here?
      >
        Login
      </Button>
    );
  }
}

と私のダイアログ...

import ReactDOM from "react-dom";
import LoginForm from './LoginForm';
import LoginFormButton from './LoginFormButton';

class LoginDialog extends Components {

  render(
    return(
      <Dialog>
        <LoginForm/>
        <div className="Footer">
          <LoginFormButton/>
        </div>
      </Dialog>   
    );  
  )
}

handleSubmit()LoginFormコンポーネントに関数を保存しています。LoginFormButtonからこれらの関数を呼び出したい。このボタンは、ダイアログコンポーネントに含まれています。

これどうやってするの？あなたの答えと私たちの助けをありがとう。私は初心者なので、正確にはわかりません。どうすればこれを実装できますか。