javascript - React：如何使用状态变量从另一个组件运行函数

问题描述

我有这个免费的组件：

我的登录表单：

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;

我的导出登录表单按钮：

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 调用这些函数。此按钮包含在对话框组件中：

我怎样才能做到这一点？感谢您的回答和我们的帮助。我是初学者，所以我不完全知道，我该如何实现这一点。

标签： javascriptreactjs

解决方案

看起来，您想要一个 LoginForm 组件和一个 LoginFormButton 来处理表单提交。

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

const LoginFormButton = ({ handleSubmit }) => {
    return (
      <Button
        appearance="primary"
        marginLeft={8}
        marginRight={16}
        intent="success"
        onClick={() => handleSubmit()} // or just -> onClick={handleSubmit}
      >
        Login
      </Button>
    );
}

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}
        />
        <LoginFormButton
          handleSubmit={this.handleSubmit}
        />
      </Pane>
    );
  }
}
export default LoginForm;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

1) 验证将在 LoginForm 组件中进行，除非您将this.state.password和传递this.state.email给LoginFormButton组件。我不建议这样做，因为验证可以在 LoginForm 组件中处理。

2) HandleSubmit 函数可以作为 LoginFormButton组件的 props 传递给组件LoginForm，并且可以直接在组件内部使用。

我建议您在状态变量中遵循 JS 标准命名约定（camelCases）。并使用箭头函数，这样您就不必显式地绑定函数，除非另有说明。

我将您更改LoginFormButton为无状态组件，因为它不需要状态。这样会更好，这也是 React 社区所鼓励的。

javascript - React：如何使用状态变量从另一个组件运行函数

问题描述

解决方案

推荐阅读