preface

1. There are always some weird issues with Ant Design UI components. In this article, WE’ll summarize some common problems with Select

Problems encountered

When initializing a Select value, how do I display the corresponding text according to the value

The implementation code is as follows

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

At this point, the code does not achieve the desired effect, showing the id of the item

There is a problem with trying to add the value attribute

Number is supported in the documentation. We learned that the version of the project is 2.13.10, and suspected that it was the version problem. In version 2.13.11, the value type is not supported by number. Only string is supported. After you understand the root cause of the problem, modify the corresponding code.

. this.props.form.setFieldsValue({ goodsId: goodsId && goodsId.toString(), }); . <FormItem {... FormItemLayout} label=" goodsId "> {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>Copy the code

Now version also can support the string | number

2. How to set Antd select to implement input filtering

ShowSearch is the default value of the select input filter. ShowSearch is the default value of the select. You can set the optionFilterProp property to “children” if you want to use content for input filtering.

3. Select onChange && onSearch

The onChange method is triggered when you select one of the options, whereas onSearch is triggered when the textbox value changes.

As shown in figure:

So when we need a fuzzy query we need to request the interface to get the data in onSearch and this method needs to be throttled

conclusion

  1. When you encounter errors that do not meet your expectations while using Ant Design UI components, you can check to see if they are due to version issues and take appropriate action
  2. The second problem arose because at the beginning someone told the filter attribute to be filtered only by value and neglected to look at the official document, which was implemented in a poor way and took a long time. Then I went to check the corresponding official documents. Due to my poor English, I did not understand the meaning of the official documents. Still need to strengthen the understanding of English official documents.
  3. When using components, it is best to help the components of the properties are familiar with understanding, do not lazy only listen to others, many problems can be found from the official documents to find the answer you want.

【 the 】

About the author: Zheng Jiahuan, Reed Technology Web front-end intern, the company’s works: lipstick challenge network red small game, server-side rendering official website. Good at website construction, public account development, wechat small program development, small games, public account development, focus on front-end domain framework, interaction design, image drawing, data analysis and other research. Working together: [email protected] visit www.talkmoney.cn to learn more

Author: Guangzhou Reed Technology Web front end

Links: juejin. Cn/post / 684490…

Source: Nuggets

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.