时间戳

首页 > 解决方案 > 在 React 中为 onFocus 事件传递参数

javascript - 在 React 中为 onFocus 事件传递参数

问题描述

当像这样聚焦输入时，我正在调用一个函数并传递它的参数：

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

标签： javascriptreactjs

解决方案

您正在检查 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>

推荐阅读