在React中為onFocus事件傳遞參數

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>