reactjs - 使用 React-Select，我怎样才能通过 React-Bootstrap-Glyphicon 访问下拉菜单？

Question

我想使用 React-Select 创建一个下拉列表，而不是 UI 看起来像这样：

我希望它看起来像这样：

这是我当前的代码：

dropDown = R.createElement(Select, {
            options: options,
            valueKey: 'value',
            labelKey: 'name',
            clearable: false,
            placeholder: "Action",
            searchable: false,
            autosize: false,
            onChange: function (opt) {
                if (opt.callback === undefined && opt.callback !== "function") { return; }
                opt.callback({
                    importable: importable,
                    scheduledImportable: sImportable
                }, index);
            },
            optionRenderer: function (ele) {
                return R.createElement(
                            'span',
                            { style: { color: ele.color} },
                            R.createElement('span', { className: ele.icon},null, " "),
                            ele.name
                        );
            }
        });

任何帮助将不胜感激。

Answer 1

可以使用其他元素来提供帮助吗？

<div className="select-wrapper">
  <span className="glyphicon glyphicon-align-left" aria-hidden="true"></span>
  <Select .... />
</div>

然后css

.select-wrapper {
  position:relative;
}

.select-wrapper .glyphicon {
  position: absolute;
  z-index: 5;
  display: block;
  top: 7px;
  left: 10px;
  color: #ccc;
  pointer-events: none;
}