React组件中如何让单个Input获得焦点而非全部？

我明白你的问题啦——你现在用同一个isFocused状态变量来控制所有StyledFormItem的高亮状态，自然会出现一个输入框聚焦，所有父元素同步高亮的情况。咱们可以通过两种思路来解决这个问题，让每个输入框独立控制自己对应的父元素状态：

方法一：用对象维护多个字段的聚焦状态 #

这种方法适合字段数量不多的场景，我们把原本单个布尔值的isFocused改成一个对象，分别存储每个输入框的聚焦状态：

修改后的代码示例： #

class LoginForm extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      // 用对象存储每个字段的聚焦状态
      focusedFields: {
        email: false,
        password: false
      }
    }; 
  } 

  // 新增处理聚焦的函数，接收字段标识作为参数
  handleFocus = (fieldName) => {
    this.setState(prevState => ({
      focusedFields: {
        ...prevState.focusedFields, // 保留其他字段的状态
        [fieldName]: true // 更新当前字段的聚焦状态
      }
    }));
  }; 

  // 同理处理失焦
  handleBlur = (fieldName) => {
    this.setState(prevState => ({
      focusedFields: {
        ...prevState.focusedFields,
        [fieldName]: false
      }
    }));
  }; 

  render() { 
    return ( 
      <Form onSubmit={this.handleSubmit}> 
        <StyledFormItem focused={this.state.focusedFields.email}> 
          <StyledInput 
            onFocus={() => this.handleFocus('email')} 
            onBlur={() => this.handleBlur('email')} 
            size="large" 
            addonAfter={<Mail size={18} />} 
            placeholder="Email Address" 
          /> 
        </StyledFormItem> 
        <StyledFormItem focused={this.state.focusedFields.password}> 
          <StyledInput 
            onFocus={() => this.handleFocus('password')} 
            onBlur={() => this.handleBlur('password')} 
            size="large" 
            addonAfter={<Lock size={18} />} 
            type="password" 
            placeholder="Password" 
          /> 
        </StyledFormItem> 
      </Form> 
    ); 
  } 
}

这样每个输入框触发聚焦/失焦时，只会更新自己对应的状态字段，StyledFormItem也只会读取自己对应的状态值，就不会出现全局同步高亮的问题了。

方法二：封装独立的表单字段组件 #

如果你的表单字段比较多，或者以后可能扩展更多字段，推荐把每个表单字段封装成独立的组件，让组件自己维护聚焦状态，这样代码更模块化，也更易维护：

第一步：封装FormField组件 #

class FormField extends React.Component {
  // 每个组件自己维护独立的聚焦状态
  state = { isFocused: false };

  handleFocus = () => this.setState({ isFocused: true });
  handleBlur = () => this.setState({ isFocused: false });

  render() {
    const { children, ...restProps } = this.props;
    // 克隆子元素（也就是StyledInput），绑定聚焦/失焦事件
    const inputElement = React.cloneElement(children, {
      onFocus: this.handleFocus,
      onBlur: this.handleBlur
    });
    return (
      <StyledFormItem focused={this.state.isFocused} {...restProps}>
        {inputElement}
      </StyledFormItem>
    );
  }
}

第二步：在LoginForm中使用这个组件 #

class LoginForm extends React.Component { 
  // 这里不需要再维护聚焦状态啦
  constructor(props) { 
    super(props); 
    // 其他状态...
  } 

  handleSubmit = (e) => {
    // 处理表单提交逻辑
  };

  render() { 
    return ( 
      <Form onSubmit={this.handleSubmit}> 
        <FormField>
          <StyledInput size="large" addonAfter={<Mail size={18} />} placeholder="Email Address" />
        </FormField>
        <FormField>
          <StyledInput size="large" addonAfter={<Lock size={18} />} type="password" placeholder="Password" />
        </FormField>
      </Form> 
    ); 
  } 
}

这种方式下，每个FormField组件的状态都是独立的，完全不会互相影响，以后新增字段时只需要直接用FormField包裹即可，不用再修改父组件的状态逻辑。

内容的提问来源于stack exchange，提问作者vizFlux