记录在使用Antd组件中遇到得几个需求,方便以后遇到同样问题再回顾

1,305 阅读1分钟

这几天AntD使用绘制页面得时候,遇到了几个自己花费挺多时间得需求。想分享在网上,以便自己再遇到时方便回顾

1. 解决Select组件中既可以输入也可以搜索得需求

因为Select组件中mode为‘tags’时,可以实现既可以选择下拉列表中得数据,也可以添加自己输入的数据,故可以对这个组件进行改造来满足
一些特定的需求(比如在产品提出想实现某个输入数据时下拉框会显示数据库中的数据,也可以自己添加新的数据)思路是,使用getFieldDeco
rator注册Select中输入的数据。当数据length超过1时,使用数组的shift方法将之前输入的删去,再使用setFieldsValue将处理过的数据重新
设置为该select的value值具体代码如下
  setParentCompany = (value, option) => {
    const { form } = this.props;
    const { setFieldsValue } = form;
    if(value.length > 1) {
      value.shift();
      setFieldsValue({
        companyName: value,
      })
    }
  }

2. 在特定Dom节点上进行样式设置

在页面中经常需要对特定的组件样式进行修改,为此,我们可以使用:global来对特定的ui进行修改。需要注意的是 :global需要放在上一层的classname下,不然容易使得全局的样式都被修改