Ввод Ant Design теряет фокус на изменении ввода

У меня есть форма, обернутая компонентом Security, чтобы пользователи без определенных разрешений не могли ее видеть. Проблема в том, что я продолжаю терять фокус на этом поле ввода при каждом нажатии клавиши.

       <Security
            component={() => (
                <FormItem
                  label='Name
                  form={form}
                  name="name"
                  rules={[RequiredRule]}
                >
                  <Input />
              </FormItem>    
            )}
          />

export const Security = ({ component: Component, history, permissions, ...props }) => {
  // if user has permissions returns the component otherwise returns null 
};

Я пропустил довольно много строк кода для краткости, но дело в том, что я передаю свой Form.Item в компонент Security и в зависимости от условий я получаю либо null, либо компонент, который я передал.

Проблема с фокусом не сохраняется, если я закомментирую эту обертку Security.


reactjs antd higher-order-functions
person Aleksandr Fomin    schedule 23.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Оказалось, что я не должен был объявлять Form.Item как стрелочную функцию внутри атрибута component, а помещал ее в переменную вне моего метода render.


formToRender = () => {
  return (
              <FormItem
                  label='Name'
                  form={form}
                  name="name"
                  rules={[RequiredRule]}
                >
                  <Input />
              </FormItem> 
       )
}

 

          <Security
            component={formToRender}
          />

Я нашел решение благодаря этому джентльмену https://stackoverflow.com/a/46172927/13288420

person Aleksandr Fomin    schedule 23.09.2020