时间戳

首页 > 解决方案 > Ant Design Form 中的输入元素非常慢

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

问题描述

我正在为 React 使用 React 和 Ant Design，并且我正在尝试构建一个包含 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>

标签： reactjsantd

解决方案

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

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

import reactComponentDebounce from 'react-component-debounce';

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

推荐阅读