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

【问题标题】：Loosing Focus While Typing On Custom Input Field React-Final-Form-Arrays在自定义输入字段 React-Final-Form-Arrays 上键入时失去焦点
【发布时间】：2021-04-02 06:46:24
【问题描述】：

我正在使用自定义组件来显示文本输入字段，这只是基本组件而已

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上完整代码的链接

如您所见，“名字”工作正常，但“姓氏”在键入时失去焦点。

如何解决这个问题，感谢任何帮助

谢谢

【问题讨论】：

标签： reactjs react-final-form react-final-form-arrays

【解决方案1】：

像这样使用它：

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

和

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

【讨论】：

我没有看到，如果你的答案对 OP 来说很好