Javascript 如何将焦点设置在一个组件中的一个输入而不是全部输入？

当

输入

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

类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
isFocused:错，
};
}
onFocus=（）=>{
这是我的国家({
是的，
});
};
onBlur=（）=>{
这是我的国家({
isFocused:错，
});
};
render（）{
返回(
);
}
}

您有这个问题，因为您的

样式表单

都引用了相同的值

状态。isFocused

一个快速的解决方案是，对于每个输入

焦点

值，从状态

isFocused

中的单个值切换到密钥对对象，并使用输入

名称

跟踪应该在事件处理程序中更新的值。您可以将组件更改为以下内容：

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

类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
重点：{
电子邮件：false，
密码：false
},
};
}
onFocus=（evt）=>{
这是我的国家({
焦点：{…this.state.focuss[evt.target.name]：true}，
});
};
onBlur=（）=>{
这是我的国家({
焦点：{…this.state.focuss[evt.target.name]：false}，
});
};
render（）{
返回(
);
}
}

---

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

感谢您的帮助。我一直在尝试使用

refs

，应该去别的地方看看。但是不确定是否更理想。对于这种情况，您实际上不需要使用

ref

，但是，如果您仍然想探索它，那么想法是获取

StyledFormItem

的ref，并在

StyledInput

事件处理程序中使用它来触发

focus

。