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

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

如何在React组件中将焦点设置为一个Input而不是all？

1 个答案: