如何执行在子组件中调用的函数作为反应中的属性?
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 事件,onSubmitSignIn 和 y 属性(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
里面,这是因为你没有bind
到this
。
所以,在您的构造函数中添加以下内容:
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
呢?以上是关于如何执行在子组件中调用的函数作为反应中的属性?的主要内容,如果未能解决你的问题,请参考以下文章