【问题标题】: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 来说很好
    猜你喜欢
    • 1970-01-01
    • 2019-10-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-16
    • 1970-01-01
    • 2020-04-30
    • 2021-12-24
    相关资源
    最近更新 更多