[英]Passing arguments for onFocus event in React
我在像这样聚焦输入时调用一个函数并传递参数:
<input
type="text"
placeholder="Password"
onFocus={e => this.onInputFocus(e, "email")}
/>
这是被调用的函数:
onInputFocus = (e, string) => {
console.log(e, string);
document.querySelector(`.label_${string}`).style.display = "block";
setTimeout(() => {
document.querySelector(`.label_${string}`).classList.add("focused");
}, 50);
};
当我console.log作为参数传递给函数的字符串时,事件注销时,它在控制台中返回undefined。
我是在做错事还是只是缺少一个概念?
继承人的全部组成部分:
import React, { Component } from "react";
class Login extends Component {
onInputFocus = (e, string) => {
console.log(e, "Argument Passed " + string);
document.querySelector(`.label_${string}`).style.display = "block";
setTimeout(() => {
document.querySelector(`.label_${string}`).classList.add("focused");
}, 50);
};
onInputBlur = name => {
document.querySelector(`.label_${name}`).classList.remove("focused");
setTimeout(() => {
document.querySelector(`.label_${name}`).style.display = "none";
});
};
render() {
return (
<main className="login">
<div className="login_container">
<div className="form_card">
<form>
<div className="form_team">
<label className="label_email" htmlFor="Email">
Email
</label>
<input
type="text"
placeholder="Email"
onFocus={this.onInputFocus}
onBlur={this.onInputBlur}
/>
</div>
<div className="form_team">
<label htmlFor="Password">Password</label>
<input
type="text"
placeholder="Password"
onFocus={e => this.onInputFocus(e, "email")}
onBlur={e => this.onInputBlur(e, "password")}
/>
</div>
</form>
</div>
</div>
</main>
);
}
}
export default Login;
您正在检查HTML的错误部分,您的代码中包含以下内容:
<input
type="text"
placeholder="Email"
onFocus={this.onInputFocus}
onBlur={this.onInputBlur}
/>
哪一个(您可以想象)仅通过事件e
,只需在其他输入中做您正在做的事情就可以了! 可能您的表格应该更像:
<form>
<div className="form_team">
<label className="label_email" htmlFor="Email">
Email
</label>
<input
type="text"
placeholder="Email"
onFocus={e => this.onInputFocus(e, "email")}
onBlur={e => this.onInputBlur(e, "email")}
/>
</div>
<div className="form_team">
<label htmlFor="Password">Password</label>
<input
type="text"
placeholder="Password"
onFocus={e => this.onInputFocus(e, "password")}
onBlur={e => this.onInputBlur(e, "password")}
/>
</div>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.