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

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

javascript reactjs

Javascript React：如何使用状态变量从另一个组件运行函数,javascript,reactjs,Javascript,Reactjs,我有以下免费组件：我的登录信息： import React，{Component}来自“React”；从“evergreen ui”导入{窗格、文本输入字段、复选框、按钮}；从“/FormValidator”导入{validateEmail，validatePassword}；类LoginForm扩展组件{ 建造师（道具）{ 超级（道具）；此.state={ 密码错误：{ 状态：false，值：“” }, 电子邮件错误：{ 状态：false，值：“” }, 电邮：“，密码：“”，

我有以下免费组件：

我的登录信息：

import React，{Component}来自“React”；
从“evergreen ui”导入{窗格、文本输入字段、复选框、按钮}；
从“/FormValidator”导入{validateEmail，validatePassword}；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
密码错误：{
状态：false，
值：“”
},
电子邮件错误：{
状态：false，
值：“”
},
电邮：“，
密码：“”，
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（）{
这是我的国家({
CheckBoxchecked:！this.state.CheckBoxchecked
});
}
handleSubmit（）{
if（this.checkFormStatus（））{
警报（“表格OK”）；
}
}
checkFormStatus（）{
//表单验证中间件
const{email，password}=this.state；
const emailErr=validateEmail（电子邮件）；
const passwordErr=validatePassword（密码）；
if（！emailErr.status&&！passwordErr.status）{
返回true；
}否则{
这是我的国家({
埃米尔，
密码错误
});
返回false；
}
}
render（）{
返回(
);
}
}
导出默认登录信息；

我的导出登录按钮：

导出类LoginFormButton扩展组件{
render（）{
返回(
登录
);
}
}

我的对话

从“react-dom”导入ReactDOM；
从“/LoginForm”导入LoginForm；
从“./LoginFormButton”导入LoginFormButton；
类LoginDialog扩展了组件{
渲染(
返回(
);  
)
}

我将函数

handleSubmit（）

存储在LoginForm组件中。我想从LoginFormButton调用这些函数。此按钮包含在对话框组件中：

我该怎么做？谢谢你的回答和我们的帮助。我是一个初学者，所以我不知道该如何实现

检查下面已更正的代码

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

export class LoginFormButton extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <div>
        <Button
          appearance="primary"
          marginLeft={8}
          marginRight={16}
          intent="success"
          onClick={this.props.handleSubmit}
        >
          Login
        </Button>
      </div>
    );
  }
}

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

class LoginDialog extends Components {

  render(
    return(
      <Dialog>
        <LoginForm/>
      </Dialog>   
    );  
  )
}

import React，{Component}来自“React”；
从“evergreen ui”导入{窗格、文本输入字段、复选框、按钮}；
从“/FormValidator”导入{validateEmail，validatePassword}；
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
密码错误：{
状态：false，
值：“”
},
电子邮件错误：{
状态：false，
值：“”
},
电邮：“，
密码：“”，
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（）{
这是我的国家({
CheckBoxchecked:！this.state.CheckBoxchecked
});
}
handleSubmit（）{
if（this.checkFormStatus（））{
警报（“表格OK”）；
}
}
checkFormStatus（）{
//表单验证中间件
const{email，password}=this.state；
const emailErr=validateEmail（电子邮件）；
const passwordErr=validatePassword（密码）；
if（！emailErr.status&&！passwordErr.status）{
返回true；
}否则{
这是我的国家({
埃米尔，
密码错误
});
返回false；
}
}
render（）{
返回(
);
}
}
导出默认登录信息；

LoginFormButton组件

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

export class LoginFormButton extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <div>
        <Button
          appearance="primary"
          marginLeft={8}
          marginRight={16}
          intent="success"
          onClick={this.props.handleSubmit}
        >
          Login
        </Button>
      </div>
    );
  }
}

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

class LoginDialog extends Components {

  render(
    return(
      <Dialog>
        <LoginForm/>
      </Dialog>   
    );  
  )
}

导出类LoginFormButton扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
返回(
登录
);
}
}

对话框组件

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

export class LoginFormButton extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <div>
        <Button
          appearance="primary"
          marginLeft={8}
          marginRight={16}
          intent="success"
          onClick={this.props.handleSubmit}
        >
          Login
        </Button>
      </div>
    );
  }
}

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

class LoginDialog extends Components {

  render(
    return(
      <Dialog>
        <LoginForm/>
      </Dialog>   
    );  
  )
}

从“react-dom”导入ReactDOM；
从“/LoginForm”导入LoginForm；
从“./LoginFormButton”导入LoginFormButton；
类LoginDialog扩展了组件{
渲染(
返回(
);  
)
}

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

import React，{Component}来自“React”；
从“evergreen ui”导入{窗格、文本输入字段、复选框、按钮}；
从“/FormValidator”导入{validateEmail，validatePassword}；
const LoginFormButton=（{handleSubmit}）=>{
返回(
handleSubmit（）}//或just->onClick={handleSubmit}
>
登录
);
}
类LoginForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
密码错误：{
状态：false，
值：“”
},
电子邮件错误：{
状态：false，
值：“”
},
电邮：“，
密码：“”，
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（）{
这是我的国家({
CheckBoxchecked:！this.state.CheckBoxchecked
});
}
handleSubmit（）{
if（this.checkFormStatus（））{
警报（“表格OK”）；
}
}
checkFormStatus（）{
//表单验证中间件
const{email，password}=this.state；