Как установить фокус на один вход вместо всех в компоненте React?

Question

Я пытаюсь сфокусировать родителя, когда input фокусируется с помощью состояния.Однако, когда вход сфокусирован, все остальные входы также становятся сфокусированными.Я не уверен, что делать, чтобы добиться этого, ваша помощь будет высоко ценится.

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

Другое, более инкапсулированное и компонентное решение будет преобразовано в один компонент, а затем будет иметь внутреннее состояние внутри для управления значением фокуса.