在自定义输入字段上打字时失去焦点React最终形式数组

Question

我正在使用自定义组件来显示文本输入字段，这与基本组件无关

const CustomTextField = ({ ...rest }) => {
return <input {...rest} />;
};

当我试图在react final表单数组中使用这个组件时，由于某种原因，我在输入字段上键入时失去了焦点，我想这是因为重新渲染。

<Field
name={`${name}.lastName`}
component={({ input, meta, ...rest }) => {
return (
<CustomTextField {...input} type="text" {...rest} />
);
}}
placeholder="Last Name"
/>

这是codesandbox 上完整代码的链接

正如你所看到的；名字"；工作良好，但"；姓氏"；打字时失去焦点。

我该如何解决这个问题，如有任何帮助，将不胜感激

感谢

Answer 1

这样使用它：

const CustomTextField = (props) => {
return <input {...props.input} />;
};

和

<Field 
name={`${name}.lastName`} 
component={CustomTextField}
placeholder="Last Name"
/>