42

antd解决select复制文本

 2 years ago
source link: https://yazhen.me/_posts/2021/antd-copySelect/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
antd解决select复制文本

Antd 的 select 组件目前还不支持复制文本功能。详见[]

我临时封装的一个可以支持复制的 select 组件。

CopySelect

没有啥原理，很简单。就是控制下拉框的展开，不让一复制文字松开后又变成文本未选则的状态了。

/**
 * Created by wyz.
 */
import React from 'react'
import { Select, Icon } from 'antd'
const Option = Select.Option;
class CopySelect extends React.PureComponent {
  state = {
    open: false,
  }
  close = () => {
    this.setState({open: false})
  }
  render() {
    const { open } = this.state
    const { options, ...restProps } = this.props
    const props = {
      ...restProps,
      open,
      suffixIcon: <Icon type="down" onClick={() => this.setState({open: !open})} />,
      clearIcon: <Icon type="close" />,
      onSelect: this.close,
      onBlur: this.close,
    }
    if (props.showSearch) {
      props.filterOption = (input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    }
    const valueIsObj = options[0] && options[0].value;
    
    return (
      <Select {...props}>
        {
          options.map(item => valueIsObj ? <Option key={item.value} value={item.value}>{item.label}</Option> : <Option key={item} value={item}>{item}</Option>)
        }
      </Select>
    )
  }
}
export default CopySelect;

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK