在react-select 2中显示带有选项的图像

manoj 发表于 Dev

马诺

我正在尝试使用react-avatar在react-select v2中的每个选项中添加图像。

这是我到目前为止尝试过的：

import React from 'react';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import Select from 'react-select';
import Avatar from 'react-avatar';

const USERS = [
  {
    value: 'John Smith', label: 'John Smith', email: '[email protected]', avatar: '',
  },
  {
    value: 'Merry Jane', label: 'Merry Jane', email: '[email protected]', avatar: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Hrithik_at_Rado_launch.jpg/220px-Hrithik_at_Rado_launch.jpg',
  },
  {
    value: 'Stan Hoper', label: 'Stan Hoper', email: '[email protected]', avatar: 'https://adminui.liscio.me/wp-content/uploads/2018/05/james_wurbs.png',
  },
];
const GRAVATAR_SIZE = 30;

const stringOrNode = PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.node,
]);

const GravatarOption = createClass({
  propTypes: {
    children: PropTypes.node,
    className: PropTypes.string,
    isDisabled: PropTypes.bool,
    isFocused: PropTypes.bool,
    isSelected: PropTypes.bool,
    onFocus: PropTypes.func,
    onSelect: PropTypes.func,
    option: PropTypes.object.isRequired,
  },
  handleMouseDown(event) {
    event.preventDefault();
    event.stopPropagation();
    this.props.onSelect(this.props.option, event);
  },
  handleMouseEnter(event) {
    this.props.onFocus(this.props.option, event);
  },
  handleMouseMove(event) {
    if (this.props.isFocused) return;
    this.props.onFocus(this.props.option, event);
  },
  render() {
    return (
      <div
        className={this.props.className}
        onMouseDown={this.handleMouseDown}
        onMouseEnter={this.handleMouseEnter}
        onMouseMove={this.handleMouseMove}>
        <Avatar round size={GRAVATAR_SIZE} className="avatar" color="#0366d6" name={this.props.option.label} src={this.props.option.avatar} />
        {this.props.option.label}
      </div>
    );
  },
});

const GravatarValue = createClass({
  propTypes: {
    children: PropTypes.node,
    placeholder: stringOrNode,
    value: PropTypes.object,
  },
  render() {
    return (
      <div className="Select-value">
        <span className="Select-value-label">
          <Avatar round size={GRAVATAR_SIZE} className="avatar" color="#0366d6" name={this.props.value.label} src={this.props.value.avatar} />
          {this.props.value.label}
        </span>
      </div>
    );
  },
});

const UsersField = createClass({
  propTypes: {
    hint: PropTypes.string,
    label: PropTypes.string,
  },
  getInitialState() {
    return {};
  },
  setValue(value) {
    this.setState({ value });
  },
  render() {
    const placeholder = <span>&#9786; Select User</span>;

    return (
      <div className="section text-left">
        <Select
          onChange={this.setValue}
          components={{ Option: GravatarOption, Value: GravatarValue }}
          options={USERS}
          placeholder={placeholder}
          value={this.state.value}
          />
      </div>
    );
  },
});

export default UsersField;

由于未定义prop选项，因此此示例无法正常工作。但是，在该示例中，它与react-select v1可以正常工作，但不适用于react-select v2。

任何帮助将不胜感激。谢谢。

史蒂夫-切刀-刀片

首先，您将要确保将innerRef和innerProps传递给您的Option，否则将不会触发mouseover和click事件（这在文档中，但没有很好地指出）。这是一个例子：

const Option = props => {
  const { innerProps, innerRef } = props;
  return (
    <article ref={innerRef} {...innerProps} className={'custom-option'}>
      <h4>{props.data.artist}</h4>
      <div className={'sub'}>{props.data.title} </div>
    </article>
  );
};

<Select {...selectProps} components={{Option}}/>

接下来，取决于isMulti，控件中显示的“值”可以是SingleValue或MultiValue。要控制SingleValue标签的显示，您可以覆盖SingleValue。要覆盖MultiValue的显示，您可能要覆盖MultiValueLabel。所有这些内容均在“组件”文档中带有示例。

最后，从上面的“选项”示例中可以看到，该选项data是对象的存储位置。您的选择可能只需要这样的东西：

import { components } from 'react-select';

const Option = props => {
  const {data} = props;
  return (
    <components.Option {...props}>
      <Avatar round size={GRAVATAR_SIZE} className="avatar" color="#0366d6" name={data.label} src={data.avatar} />
      {data.label}
    </components.Option>
  );
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。