ReactJS注册表单输入框每输入一个字符即失焦问题求助

问题根源 #

你遇到的输入框失焦问题，核心原因是自定义组件（比如Input、Form等）被定义在Register组件的内部或者渲染函数中。每次RegData状态更新触发组件重渲染时，这些自定义组件都会被重新创建，React会把它们识别成全新的组件，卸载旧组件再挂载新的，自然就丢失了输入焦点。

另外，你最后一个确认密码的输入框没有绑定value属性，属于非受控组件，也需要修正。

修复步骤 #

1. 将自定义组件移到Register组件外部
   把Cont、Logo、Container、RegContainer、Title、Form、Input、SignUpBtn这些自定义组件，从Register组件内部移到外部定义，确保它们只被创建一次。

2. 完善Confirm Password输入框的受控绑定

• 在RegData的初始state中添加confPassword: ''
• 给确认密码输入框加上value={RegData.confPassword}属性

修正后的核心代码示例 #

// 先定义所有自定义组件，放在Register组件外部
const Cont = styled.div`/* 你的样式代码 */`;
const Logo = styled(Link)`/* 你的样式代码 */`;
const Container = styled.div`/* 你的样式代码 */`;
const RegContainer = styled.div`/* 你的样式代码 */`;
const Title = styled.h1`/* 你的样式代码 */`;
const Form = styled.form`/* 你的样式代码 */`;
const Input = styled.input`/* 你的样式代码 */`;
const SignUpBtn = styled.button`/* 你的样式代码 */`;

// 然后定义Register组件
const Register = () => {
  const [RegData, setRegData] = React.useState({
    firstname: '',
    lastname: '',
    username: '',
    email: '',
    password: '',
    confPassword: '', // 新增确认密码字段
  });

  function handleChange(event) {
    const { name, value} = event.target;

    setRegData((prevRegData) => {
      return {
        ...prevRegData,
        [name]: value,
      };
    });
  }

  return (
    <Cont>
      <Logo to="/">Aurum.</Logo>
      <Container>
        <RegContainer>
          <Title>REGISTER</Title>
        
          <Form>
            <Input
              type="text"
              name="firstname"
              value={RegData.firstname}
              placeholder="First Name"
              onChange={handleChange}
            />
            {/* 其余输入框保持原有逻辑 */}
            <Input
              type="text"
              name="confPassword"
              value={RegData.confPassword} // 新增value绑定
              placeholder="Confirm Password"
              onChange={handleChange}
            />

            <SignUpBtn>SIGN UP</SignUpBtn>
          </Form>
        </RegContainer>
      </Container>
    </Cont>
  );
};

补充说明 #

如果你的自定义组件原本是用styled-components创建的，只要确保它们不是定义在Register组件内部，就能解决焦点丢失的问题。状态更新的handleChange逻辑本身是正确的，不需要修改。

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