如何执行在子组件中调用的函数作为反应中的属性?

Posted

技术标签:

【中文标题】如何执行在子组件中调用的函数作为反应中的属性?【英文标题】:how to execute a function which is evoked in a child component as a property in react? 【发布时间】:2018-12-13 07:06:09 【问题描述】:

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

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

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

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

在组件文件 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;

我真正希望看到的是,每当我在登录页面(前端部分)输入电子邮件和密码然后单击提交按钮时,我应该在控制台上看到电子邮件和密码并登录主页。从技术上讲,通过在提交按钮上调用 onClick 事件,onSubmitSignIny 属性(Signin)都应该被执行。

但我在控制台上既看不到密码和电子邮件,也无法登录并采取进一步措施。我应该如何同时执行 onSubmitSignIn 和 Y?

【问题讨论】:

打电话给onSubmitSignIn时你是否得到了未定义? 当我点击提交按钮并执行以下操作时: onClick=this.onSubmitSignIn 如果没有添加格式正确的电子邮件,我将获取作为电子邮件和密码输入的数据,即, 一个没有@符号的数据。但是,如果我为电子邮件和常规密码输入正常数据(包括@符号),控制台上不会出现任何内容。 我为您的情况添加了一个答案。希望它有效@BruceB 【参考方案1】:

当您提交表单时,您的浏览器会刷新,因为这是默认行为。

在提交事件上使用preventDefault 来阻止这种情况发生。

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

【讨论】:

【参考方案2】:

我添加了这些行,它执行了这两个功能:

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

我不是写了 event.preventDefault();我将无法看到日志。如果我没有在 y 之后加上括号(作为组件 Signin 的属性),我就无法从父文件中调用它。

非常感谢各位。

【讨论】:

【参考方案3】:

我猜你在做的时候会得到undefined

console.log(this.state);

onSubmitSignIn 里面,这是因为你没有bindthis

所以,在您的构造函数中添加以下内容:

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

还要考虑到您的按钮是一个表单提交器,因此它会触发一个事件来提交表单,然后刷新页面。所以你还必须在你的onSubmitSignIn上添加以下内容

  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.
  ; 

【讨论】:

既然已经是箭头函数了,为什么还要在构造函数中bind呢?

以上是关于如何执行在子组件中调用的函数作为反应中的属性?的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS中从父组件调用子函数时如何在子组件中设置状态

如何调用另一个文件中的组件?反应原生

无法从父反应组件调用子反应组件的属性

ReactNative进阶(二十六):子组件调用父组件中的函数

接受带有组件的参数作为反应中的函数(快速修复)

功能性反应如何不重置状态?