Выбор компонентов пользовательского интерфейса Ant Design

Ant Design

предисловие

1. При использовании компонентов интерфейса Ant всегда возникают странные проблемы В этой статье мы обобщим несколько распространенных проблем при использовании Select.

возникшие проблемы

При инициализации значения Select, как отобразить соответствующий текст в соответствии со значением

Код реализации выглядит следующим образом

...
this.props.form.setFieldsValue({
    latticeId,
    latticeNo,
    goodsId,
    remaining
});
...
<FormItem {...formItemLayout} label="商品">
    {getFieldDecorator('goodsId', {
    })(            
    <Select style={{ width: '150px' }}>
    {this.state.goodsData.map((item,index) => <Option  key={item.goodsId} >{item.goodsId +'-' + item.goodsName}</Option>)}
    </Select>
    )}
</FormItem>

В настоящее время эффект реализации кода не такой, как ожидалось, и отображается идентификатор продукта.

Возникла проблема при попытке добавить атрибут value

Обратитесь к соответствующим документам, чтобы получить номер поддержки, и это сбивает с толку. Я узнал, что в проекте используется версия 2.13.10, и есть подозрение, что это проблема версии. Проверьте документацию соответствующей версии, проблема здесь, в версии 2.13.11 значение не поддерживает числовой тип, только строку. Поняв источник проблемы, измените соответствующий код.

    ...
    this.props.form.setFieldsValue({
        goodsId: goodsId && goodsId.toString(),
    });
    ...
    <FormItem {...formItemLayout} label="商品">
        {getFieldDecorator('goodsId', {
        })(            
           <Select style={{ width: '150px' }}>
            {this.state.goodsData.map((item,index) => <Option  key={item.goodsId} value={item.goodsId.toString()}>{item.goodsId +'-' + item.goodsName}</Option>)}
          </Select>
        )}
    </FormItem>

Текущая версия также поддерживает строку | число

2. Как настроить Antd select для реализации входной фильтрации

​ При использовании select для фильтрации ввода вам нужно только добавить showSearch в Select, но следует отметить, что по умолчанию используется фильтрация в соответствии со значением в Option.Если вам нужно использовать содержимое для фильтрации ввода, вы можете установить свойство optionFilterProp на «дети».

3. Разница между onChange и& onSearch в Select

Метод onChange запускается при выборе одного из параметров, а onSearch запускается при изменении значения текстового поля.

Как показано на рисунке:

1558526278564

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

Суммировать

  1. Когда вы сталкиваетесь с неожиданными ошибками при использовании компонентов пользовательского интерфейса Ant Design, вы можете проверить, не вызвана ли это проблемой версии, а затем прописать правильное лекарство.
  2. Вторая проблема возникает из-за того, что кто-то сказал, что атрибут filter можно фильтровать только по значению, и пренебрег проверкой официального документа, и реализовал это паршиво, что заняло много времени. Пойдите, чтобы проверить соответствующие официальные документы.Поскольку английский язык не очень хорош, я не понял смысла официальных документов. Еще нужно укрепить понимание английских официальных документов.
  3. При использовании компонента лучше всего помочь ознакомиться и понять свойства компонента.Не ленитесь и просто слушайте других.На многие вопросы можно найти ответы из официальной документации.

【над】

об авторе: Чжэн Цзяхуань, стажер веб-интерфейса Reed Technology, работы компании: помада вызов онлайн-мини-игра знаменитости, официальный сайт рендеринга на стороне сервера. Он хорошо разбирается в создании веб-сайтов, разработке общедоступных учетных записей, разработке апплетов WeChat, мини-играх и разработке общедоступных учетных записей, уделяя особое внимание структуре внешнего интерфейса, дизайну взаимодействия, рендерингу изображений, анализу данных и другим исследованиям. Вместе мы боремся:zhengjiahuan@talkmoney.cnдоступwww.talkmoney.cnпонять больше

Автор: Веб-интерфейс Guangzhou Reed Technology

Связь:nuggets.capable/post/684490…

Источник: Самородки

Авторские права принадлежат автору. Для коммерческих перепечаток, пожалуйста, свяжитесь с автором для получения разрешения, а для некоммерческих перепечаток, пожалуйста, укажите источник.

Категории