Javascript 如何执行在子组件中作为react属性调用的函数？

在我的app.js文件中，我包含了一个签名组件，如下所示：

onSignin = () => {
  this.setState({ route: "home" });
};

regFunction = () => {
  this.setState({ route: "registering" });
};

render() {
  return (
    <div>
      <Signin y={this.onSignin} reg={this.regFunction} />
    </div>
  );
}

onSignin=（）=>{
this.setState（{route:“home”}）；
};
regFunction=（）=>{
this.setState（{route:“registing”}）；
};
render（）{
返回(
);
}

在组件文件Signin.js中，我编写了以下内容：

import React from "react";

class Signin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      signInEmail: "",
      signInPassword: ""
    };
  }

  onEmailChange = event => {
    this.setState({ signInEmail: event.target.value });
  };
  onPasswordChange = event => {
    this.setState({ signInPassword: event.target.value });
  };
  onSubmitSignIn = () => {
    console.log(this.state);
    this.y;
  };

  render() {
    return (
      <article className="br4 ba  b--black-10 mv4 w-100 w-50-m w-25-l mw6 shadow-5 center">
        <main className="pa4 white-80">
          <form className="measure ">
            <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
              <legend className="f4 fw6 ph0 mh0">Sign In</legend>

              <div className="mt3">
                <label className="db fw6 lh-copy f6">Email</label>
                <input
                  className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                  type="email"
                  name="email-address"
                  id="email-address"
                  onChange={this.onEmailChange}
                />
              </div>
              <div className="mv3">
                <label className="db fw6 lh-copy f6" for="password">
                  Password
                </label>
                <input
                  className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100"
                  type="password"
                  name="password"
                  id="password"
                  onChange={this.onPasswordChange}
                />
              </div>
            </fieldset>
            <div className="">
              <input
                className="b ph3 pv2 input-reset ba white-80 b--black bg-transparent grow pointer f6 dib"
                type="submit"
                value="Sign in"
                id="clicking"
                onClick={this.onSubmitSignIn}
                // onClick={this.props.y}
              />
            </div>
            <div className="lh-copy mt3">
              <a
                onClick={this.props.reg}
                type="submit"
                className="b ph3 pv2 input-reset ba white-80 b--black bg-transparent grow pointer f6 dib"
                value="Register"
              >
                Register
              </a>
            </div>
          </form>
        </main>
      </article>
    );
  }
}

export default Signin;

从“React”导入React；
类签名扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
签名：“，
签名密码：“
};
}
onEmailChange=事件=>{
this.setState（{signInEmail:event.target.value}）；
};
onPasswordChange=事件=>{
this.setState（{signInPassword:event.target.value}）；
};
onSubmitSignIn=（）=>{
console.log（this.state）；
这个.y；
};
render（）{
返回(
登录
电子邮件
暗语
登记
);
}
}
导出默认签名；

我实际上希望看到的是，每当我在登录页面（前端部分）中输入电子邮件和密码，然后单击提交按钮时，我都会在控制台上看到电子邮件和密码，并登录到主页面。从技术上讲，通过调用提交按钮上的onClick事件，应同时执行SubmitSignin和y属性（Signin）

---

但我既看不到控制台上的密码和电子邮件，也无法登录并进一步操作。只需同时单击一次，我应该如何执行onSubmitSignIn和Y？

提交表单时，浏览器会刷新，因为这是默认行为

对提交事件使用

preventDefault

，以阻止这种情况发生

onSubmitSignIn = (event) => {
  event.preventDefault();
  console.log(this.state);
  this.props.y();
};

---

我猜您在执行时得到了

未定义的

console.log(this.state);

在SubmitSignin的
中，这是因为您没有将
绑定到
此

因此，在构造函数上添加以下内容：

  constructor(props) {
    super(props);
    this.state = {
      signInEmail: "",
      signInPassword: ""
    };
    this.onSubmitSignIn = this.onSubmitSignIn.bind(this);
  }

还要考虑到您的按钮是一个表单子窗口，因此它将触发一个事件来提交表单，然后刷新页面。因此，您还必须在SubmitSignin上添加以下内容

  onSubmitSignIn = (e) => {
    e.preventDefault();  // this will stop the propagation of the event.
    console.log(this.state); // this will log your state.
    this.props.y(); // this will call your y function from the parent.
  }; 

我添加了这些行，它执行了两个功能：

onSubmitSignIn = (event) => {
  event.preventDefault();
  console.log(this.state);
  this.props.y()
}

我不是写过event.preventDefault（）吗；我就看不到日志了。如果我没有在y后面加括号（作为组件sign的属性），我就不能从父文件调用它

非常感谢各位。
您在调用
onSubmitSignIn
时是否未定义？当我单击提交按钮并执行以下操作时：onClick={this.onSubmitSignIn}如果没有添加格式正确的电子邮件，即没有@符号的数据，我将获得作为电子邮件和密码输入的数据。但是，如果我为电子邮件和常规密码输入正常数据（@sign），控制台上不会显示任何内容。我为您的案例添加了asnwer。希望它能在@BruceBWhy工作当它已经是一个arrow函数时，他为什么要在构造函数中绑定它？