Question

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

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

Answer 1

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

在React中为onFocus事件传递参数

1 个答案: