我调用一个函数并在聚焦输入时传递参数，如下所示：
<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 .
我做错了什么或只是错过了一个概念？
Heres完整组件：
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;
1 回答
你正在检查HTML的错误部分，你的代码中有这个：
哪个（因为你可以成像）只传递事件
e，只是做你正在做的其他输入，你们都很好！可能你的形式应该更像：