antdDesign select一些api的理解

关于antd组件Select的api的用法

1 defaultValue

defaultValue 文档看起来比较简单，但是当你动态赋值的时候会发现defaultValue不起作用，原因就是react渲染机制引起的，那么怎么解决这个问题呢？
1 我查百度常说的是把 defaultValue 换成 value 但是Select 组件当换成value 属性时 再下拉选择，选择内容不在会改变，所以这个方法并不适用
2 对于这个问题 可一个Select 设置一个 key值，根据diff算法，key值不同 会重新渲染 代码如下

<Select placeholder="请选择" 
style={{ "width": "200px" }} 
key={this.state.options.length > 0 ? this.state.options[1].value : " "}   
onChange={this.handleChange}  
defaultValue={this.state.options.length > 0 ? this.state.options[2].value : ""}   
options={this.state.oprtion}   />

2 dropdownRender

这个属性 是让我们可以自定义下拉框的内容 举例如下

<Select  placeholder="请选择"  onChange={this.handleChange} allowClear  dropdownRender={(menu) =>
                        <div>
                            {menu}
                             <Card>
                               自定义内容
                             </Card>
                        </div>
                    } >
                     
                         {this.state.options.map((item, index) => {
                                if (index <= 2) {
                                  return (
                                 <Option value={item.value} key={item.value} label={item.label}  > {item.label} </Option>
                                    )
                                }
                            })} 
                    </Select>

可以看到 dropdownRender的用法最终返回的是个dom，menu就是代表select下的 option的各项，然后Card里的东西就是我们自定义的下拉框内容了

3 filterOption

filterOption 是当我们设置下拉框具备搜索功能时，在这个函数里可以自定义搜索方式

handleFilter=(inputValue,option)=>{
     // inputValue 就是我们向搜锁框里输入的内容
     // option 是返回的各个option的实例对象 
     //比如像这样  {key: "4", value: "4", children: "漩涡鸣人", label: "漩涡鸣人"}  
}
<Select  filterOption={this.handleFilter}   >
                      
   {this.state.options.map((item, index) => {
    if (index <= 2) {
     return (
       <Option value={item.value} key={item.value} label={item.label}  >
          {item.label}
       </Option>
     )
   }
 })}
</Select>

4 labelInValue

给 Select 添加这个属性，就不会再返回value值，而是返回一个对象了，
还是代码说话

 handleChange=(value)=>{
   console.log(value)   //没加labelInValue之前 返回的 是 1
                       //加了labelInValue之后返回的是 {value:1,label:"漩涡鸣人"}
 }
 <Select  labelInValue  onChange={this.handleChange}>
    <Option value="1" key="1" label="漩涡鸣人">漩涡鸣人<Option>
    <Option value="2" key="2" label="漩涡玖辛奈">漩涡玖辛奈<Option>
 </Select>

4 optionFilterProp

这个属性是当我们设置下拉框允许搜索功能时，对应某个属性的搜索
比如说<Option value="1" key="1" label="漩涡鸣人">漩涡鸣人<Option>
一个option有value 也有label属性 如果想要搜索是根据label属性对应的内容搜索 我们只需
设置这个optionFilterProp="label"即可

 <Select optionFilterProp="label" onChange={this.handleChange}>
    <Option value="1" key="1" label="漩涡鸣人">漩涡鸣人<Option>
    <Option value="2" key="2" label="漩涡玖辛奈">漩涡玖辛奈<Option>
 </Select>

5 optionLabelProp

这个属性是我们选中哪个选项时回填到选择器里的内容

<Select onChange={this.handleChange} optionLabelProp="label"  >
       {this.state.options.map(item => {
          return (
            <Option value={item.value} key={item.value} label={item.label}   >
               <div >
                 3333333333
                 {item.label}
               </div>
              </Option>
            )
        })}
</Select>

如果我们选中了哪个选择项 应该回填到 select里的内容应该是选中里面的所有内容，但是设置了 optionLabelProp=“label” 那么我们回填到选择框的内容就只有label了

6 options

配置化 比如我们返回的数据是
[{value:1,key:1,label:“漩涡鸣人”},{value:2,key:2,label:“漩涡玖辛奈”}]
当设置 <Select options={this.state.option} /> 就不用再写那么多的组件了

7 showSearch

这个属性可以是选择框具备搜索功能

8 tagRender

这个属性比如我们在 mode="multiple"情况下可以自定义 tag的样式等
这个就用官网的例子举例来说

tagRender=(props)=>{
   const {label,value,onClose,onClose}=props
   return (
    <Tag color={value} closable={closable} onClose={onClose} style={{ marginRight: 3 }}>
      {label}
    </Tag>
  );
}
<Select
    mode="multiple"
    tagRender={tagRender}
    defaultValue={['gold', 'cyan']}
    options={options}
  />,

这样我们选中每个选项后到select输入框里的内容就是我们自定义好的标签了

对于一些onChange，onBlur的方法就不多说了，也好理解，看好回调的参数就好