在自定义输入字段React-Final-Form-Arrays上键入时失去焦点

Question

我使用自定义组件来显示文本输入字段，没有什么特别的东西，只是基本的组件

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

当我尝试在react-final-form-array中使用这个组件时，由于某种原因，我在输入字段时失去了焦点，我猜这是因为重新呈现。

<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"
/>