reactjs - Ant Design Form 中输入元素非常慢

Question

我正在使用 React 和 Ant Design for React，并且正在尝试构建一个包含 10 到 15 个输入元素的表单。输入速度非常慢。我在文档中使用他们的示例作为引用，并且我没有做任何不同的事情。什么可能导致我的问题？以下是引用代码:

const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };

<Form inline="true" onSubmit={this.handleSubmit}>
          <Row gutter={8}>
            <Col span={15}>
              <FormItem {...formItemLayout} label="Name">
                {getFieldDecorator(
                  `category[categories_langs][na5me]`)(
                    <Input/>
                )}
              </FormItem>
            </Col>
          </Row>
          
          // The above Row repeated ten-fifteen times

</Form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

这应该是antd和rc-form的问题。请参阅:https://github.com/ant-design/ant-design/issues/14054

到目前为止，解决方法是使用去抖动方法来改善输入体验。您可以创建一个高级组件来包装输入组件。库 https://www.npmjs.com/package/react-component-debounce可以帮助您做到这一点。类似的代码如下:

import reactComponentDebounce from 'react-component-debounce';

const DebounceInput = reactComponentDebounce({
    valuePropName: 'value',
    triggerMs: 250,
  })(Input);