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

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传递给您的选项，否则它不会触发鼠标悬停和单击事件(这在文档中，但没有很好地说明)。这是一个例子:

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}}/>

接下来，控件中显示的“值”可以是 SingleValue 也可以是 MultiValue，具体取决于 isMulti。要控制 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>
  );
};