javascript - 如何在 React 组件中将焦点设置在一个输入而不是所有输入上？

Question

当 input 使用 state 获得焦点时，我正在尝试使父对象成为焦点。然而，当一个输入被聚焦时，所有其他输入也会被聚焦。我不确定该怎么做才能实现这一点，非常感谢您的帮助。

class LoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFocused: false,
    };
  }

  onFocus = () => {
    this.setState({
      isFocused: true,
    });
  };

  onBlur = () => {
    this.setState({
      isFocused: false,
    });
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <StyledFormItem focused={this.state.isFocused === true}>
            <StyledInput
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              size="large"
              addonAfter={<Mail size={18} />}
              placeholder="Email Address"
            />
        </StyledFormItem>

        <StyledFormItem focused={this.state.isFocused === true}>
            <StyledInput
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              size="large"
              addonAfter={<Lock size={18} />}
              type="password"
              placeholder="Password"
            />
        </StyledFormItem>
      </Form>
    );
  }
}

Answer 1

您遇到这个问题是因为您的两个 StyledFormItem 都引用相同的值 state.isFocused。

一个快速的解决方案是将状态 isFocused 中的单个值切换为每个输入 focus 值的键对对象，并使用输入 name 以跟踪应在事件处理程序中更新的值。您可以将您的组件更改为:

class LoginForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      focuses: {
         email: false,
         password: false
      },
    };
  }

  onFocus = (evt) => {
    this.setState({
      focuses: {...this.state.focuses, [evt.target.name]: true},
    });
  };

  onBlur = () => {
    this.setState({
      focuses: {...this.state.focuses, [evt.target.name]: false},
    });
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <StyledFormItem focused={this.state.focuses.email}>
            <StyledInput
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              size="large"
              name="email"
              addonAfter={<Mail size={18} />}
              placeholder="Email Address"
            />
        </StyledFormItem>

        <StyledFormItem focused={this.state.focuses.password}>
            <StyledInput
              onFocus={this.onFocus}
              onBlur={this.onBlur}
              size="large"
              name="password"
              addonAfter={<Lock size={18} />}
              type="password"
              placeholder="Password"
            />
        </StyledFormItem>
      </Form>
    );
  }
}

另一个更加封装和组件化的解决方案将转换为单个组件，然后在内部有一个内部状态来控制焦点值。