如何创建下拉菜单以与图标做出反应

Question

嗨，我想在react 中创建一个dropDown，每个项目都有一个图标。当我尝试react-select，但它没有显示icon，也没有显示选定的值。当我从react-select component 中删除value prop 时，label 显示。我想创建这样的下拉列表。

//USerInfo.js

import React from "react";
import { connect } from "react-redux";
import FontAwesome from "react-fontawesome";
import Select from "react-select";

import { setPresence } from "../../ducks/user";

import "./UserInfo.css";

class UserInfo extends React.Component {
  //   constructor(props) {
  //     super(props);
  //     this.state = {
  //       currentPresence: "available",
  //     };
  //   }

  presenceOpts = [
    { value: "available", label: "Available" },
    { value: "dnd", label: "Busy" },
    { value: "away", label: "Away" },
  ];

  setPresenceFun(presence) {
    this.props.setPresence(presence);
  }

  renderPresenceOption(option) {
    return (
      <div className="presenceOption">
        <FontAwesome name="circle" className={"presenceIcon " + option.value} />
        {option.label}
      </div>
    );
  }

  renderPresenceValue(presence) {
    return (
      <div className="currentPresence">
        <FontAwesome
          name="circle"
          className={"presenceIcon " + presence.value}
        />
      </div>
    );
  }

  render() {
    return (
      <div className="UserInfo">
        {this.props.client.authenticated && (
          <div className="authenticated">
            <div className="user">
              <div className="presenceControl">
                <Select
                  name="presence"
                  value={this.props.user.presence.value}
                  options={this.presenceOpts}
                  onChange={this.setPresenceFun.bind(this)}
                  clearable={false}
                  optionRenderer={this.renderPresenceOption}
                  valueRenderer={this.renderPresenceValue}
                />
              </div>

              <div className="username">
                <p>{this.props.client.jid.local}</p>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

const mapStateToProps = (state, props) => ({
  client: state.client,
  user: state.user,
});

const mapDispatchToProps = (dispatch, props) => {
  return {
    setPresence: (presence) => dispatch(setPresence(presence)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(UserInfo);

Answer 1

您可以自定义下拉选项

这可以帮助您解决 react select 的自定义样式问题。

https://codesandbox.io/s/react-select-add-custom-option-forked-u1iee?file=/src/index.js