Question

我正在尝试使用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: 'john@smith.com', avatar: '',
  },
  {
    value: 'Merry Jane', label: 'Merry Jane', email: 'merry@jane.com', 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: 'stan@hoper.com', 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一起使用。

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

Answer 1

首先，您将要确保将innerRef和innerProps传递给您的Option，否则它将不会触发鼠标悬停和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。所有这些都在Components documentation中列出，并带有示例。

最后，从上面的“选项”示例中可以看到，选项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>
  );
};

使用react-select 2中的选项显示图像

1 个答案: