使用React-Select，如何通过React-Bootstrap-Glyphicon访问下拉列表？

Question

我想使用React-Select创建一个下拉列表，但不是看起来像这样的用户界面：

我希望它看起来像这样：

这是我目前的代码：

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