Antd 模拟Selcet下拉框组件支持选择和自定义输入

业务需要支持选择和自定义输入，百度了一圈找到一些思路，这里主要有一个坑的点是AutoComplete组件不像Select组件一样有label和value，它只有value属性。

效果图如下：

代码如下： 

我的options结构，记得把displayName映射为label

            options = [
                {
                  displayName: '2',
                  value: '22027',
                },
                {
                  displayName: '4',
                  value: '22029',
                },
                {
                  displayName: '6',
                  value: '22032',
                },
                {
                  displayName: '8',
                  value: '27436',
                },
                {
                  displayName: '10',
                  value: '27438',
                },
                {
                  displayName: '12',
                  value: '3234583',
                },
                {
                  displayName: '14',
                  value: '3241261',
                },
                {
                  displayName: '16',
                  value: '3250796',
                },
                {
                  displayName: '14w',
                  value: '3649485',
                },
                {
                  displayName: '16W',
                  value: '4140646',
                },
                {
                  displayName: '18W',
                  value: '4043547',
                },
                {
                  displayName: '20W',
                  value: '3295553',
                },
                {
                  displayName: '22W',
                  value: '5332895',
                },
                {
                  displayName: '24W',
                  value: '8361230',
                },
                {
                  displayName: '26W',
                  value: '10284785',
                },
                {
                  displayName: '28W',
                  value: '12785202',
                },
                {
                  displayName: 'other',
                  value: '-1',
                },
              ]

value的格式

          attrValues = [
              {
                attrValueId: '3285248',
                attrValue: 'illusion',
              },
              {
                attrValueId: '3288205',
                attrValue: 'Vintage',
              },
              {
                attrValueId: '3357888',
                attrValue: 'simple',
              },
              {
                attrValueId: -3,
                attrValue: 'other3',
              },
              {
                attrValueId: -4,
                attrValue: 'other4',
              },
            ],