Javascript 如何在输入值更改时关注样式化组件输入组件

我正在呈现一个

字段

组件，它使用样式化组件构建一个

输入

字段。我遇到的问题与此类似。我没有在

应用程序

组件中定义

字段

组件，但我仍然面临同样的问题，每次输入值更改时都会丢失输入。似乎正在渲染一个新的

字段

组件，但没有焦点。我是否有办法防止渲染新的

字段

组件，或者我是否必须以某种方式将焦点设置在每个输入更改上？如果我这样做，是因为性能或其他问题，我应该避免使用这种良好做法还是什么？如果需要更多细节或上下文，我创建了一个

const-App=（）=>{
const[emailVal，setEmailVal]=useState（“”）；
const[passwordVal，setPasswordVal]=useState（“”）；
常量handleChange=e=>{
如果（e.target.name==“电子邮件”）{
setEmailVal（即目标值）；
返回；
}
setPasswordVal（即target.value）；
};
返回(
);
};

const-Field=（{data:{name，type，placeholder，label}，value，onChange}）=>{
返回(
);
};

你的例子是完整的、可复制的，但不是最小的：试着将你的例子缩小到你能创建的最小的例子，以再现你的问题。您甚至可以通过这样做找到问题的根源。我试图阅读你的代码，但它太复杂了，我不得不放弃。谢谢@RicardoLopes，我缩小了代码，希望它更可读。缩小规模后，问题仍然存在。好得多，但我仍然不清楚你通过这一切想要实现什么。据我所知，问题在于

Box.js

，特别是在您的

Base

组件中。您可以看到，替换行

constbox=styled（cleanElement（Base））（

with

const-Box=styled.div

使问题消失。你到底想实现什么，需要这个

Base

元素？看起来

filterprops

和

cleanElement

做同样的事情？只是澄清一下，因为你正在重新创建整个组件，所以你正在失去注意力是正常的每次都是通过这个

Base

元素进行nt。我遇到了一个问题，在这个元素上出现了一些道具。但是你是对的，虽然这就是问题的原因。进行更改解决了问题。谢谢！你的完整性和可复制性，但不是最小的：尝试将你的示例缩小到最小的示例你可以创建一个可以重现你的问题的程序。你甚至可以通过这样做找到问题的根源。我试图阅读你的代码，但它太复杂了，我不得不放弃。谢谢@RicardoLopes，我缩小了代码的规模，希望它更具可读性。缩小后，问题仍然存在。情况好多了，但我很高兴仍然对您试图实现的目标感到困惑。据我所知，问题在于

Box.js

，特别是在

Base

组件中。您可以看到替换行

const-Box=styled（cleanElement（Base））（

with

const-Box=styled.div

使问题消失。你到底想实现什么，需要这个

Base

元素？看起来

filterprops

和

cleanElement

做同样的事情？只是澄清一下，因为你正在重新创建整个组件，所以你正在失去注意力是正常的每次都是通过这个

Base

元素进行nt。我遇到了一个问题，在这个元素上出现了一些道具。但是你是对的，这就是问题的原因。进行更改可以解决问题。谢谢！

const App = () => {
  const [emailVal, setEmailVal] = useState("");
  const [passwordVal, setPasswordVal] = useState("");

  const handleChange = e => {
    if (e.target.name === "email") {
      setEmailVal(e.target.value);
      return;
    }

    setPasswordVal(e.target.value);
  };

  return (
    <Box as="form">
      <Field
        data={{
          name: "email",
          type: "text",
          placeholder: "enter email",
          label: "email"
        }}
        errors={[]}
        value={emailVal}
        onChange={handleChange}
      />
      <Field
        data={{
          name: "password",
          type: "password",
          placeholder: "enter password",
          label: "email"
        }}
        errors={[]}
        value={passwordVal}
        onChange={handleChange}
      />
    </Box>
  );
};

const Field = ({ data: { name, type, placeholder, label }, value, onChange }) => {

  return (
    <Box>
      <Box
        value={value}
        onChange={onChange}
        as='input'
        name={name}
        placeholder={placeholder}
      />
    </Box>
  );
};