Question

我有一个由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包装程序，焦点问题就不会继续存在。

Answer 1

事实证明，我不应该将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

，我找到了解决方案

蚂蚁设计输入失去对输入更改的关注

1 个答案: