在自定義輸入字段 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"
/>