javascript - React js添加onFocus类并删除onBlur类

Question

下面我附上了我的代码当我专注于输入时添加类两个输入，当模糊删除两个输入中的类时，但我想在特定输入焦点和模糊时为每个输入添加类。当输入焦点和模糊时，我使用焦点状态添加和删除类。

class LoginForm extends React.Component {
  state = {
    focus: false
  };

  onFocus = () => {
    this.setState({focus: true})
  };
  onBlur = () => {
    this.setState({focus: false})
  };

  render() {
    const { focus } = this.state;
    return (
      <Form>
        <img src={`/images/login/profile1.svg`} alt="Profile" />
        <h2 className="title">Login</h2>

        <div className={`input-div one`} >
          <div className="i">
            <i className="fas fa-user"></i>
          </div>
          <div className="div">
            <Form.Field>
              <input
                  className={`input ${focus ? "hello" : ""} `}
                  placeholder="Email"
                  onBlur={this.onBlur} 
                  onFocus={this.onFocus.bind(this)}
                  type="email"
                  id="email"
                  name="email"
              />
            </Form.Field>
          </div>
        </div>
        <div className={`input-div pass`}>
          <div className="i">
            <i className="fas fa-lock"></i>
          </div>
          <div className="div">
            <Form.Field>
              <input
                  className={`input ${focus ? "hello" : ""} `}
                  placeholder="password"
                  onBlur={this.onBlur} 
                  onFocus={this.onFocus.bind(this)}
                  type="password"
                  id="password"
                  name="password"
              />
            </Form.Field>
          </div>
        </div>
        <Button className="fire-login-btn">Login</Button>
      </Form>
    );
  }
}

Answer 1

您可以使用在 onFocus 和 onBlur 处理程序中获取的事件对象向 dom 元素添加或删除类。

这里我创建了一个示例向您展示: https://codesandbox.io/s/competent-oskar-hr9lb?file=/src/App.js

希望有帮助:)