Multiple Selector，将选中的选项放在input元素下

Question

所以，我想将 selected 选项放在多数组 select 或 select 字段下面，我想知道是否有任何聪明的方法来完成这个比只使用 css?

阅读文档，我真的找不到任何允许这样做的道具等。

我尝试使用简单的 CSS 将它们向下移动，但似乎应该有更好的方法来做到这一点。

请暂时忽略 selector。

.select.below > div > div {
    position: absolute;
    top: 38px;
    left: -10px;
    width: 100%;
}

.select.below > div > div:nth-child(2) {

}

Answer 1

强烈建议您使用 Style-in-JS 方法对 react-select 进行任何类型的样式自定义。

根据您的具体需求，我会这样做：

const styles = {
  control: base => ({
    ...base,
    justifyContent: "flex-end"
  }),
  valueContainer: base => ({
    ...base,
    position: "absolute",
    width: "100%",
    top: "40px"
  })
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: false
    };
  }
  onChange = options => {
    this.setState({
      values: options
    });
  };
  render() {
    return (
      <div className="App">
        <Select
          onChange={this.onChange}
          isMulti
          options={options}
          styles={this.state.values.length > 0 && styles}
          value={this.state.values}
        />
      </div>
    );
  }
}

有两个重要部分：

CSS 部分被 styles 道具取代。您可以看到有两个地方需要更新； control 容器和 valueContainer。如果您不更新 control 的 justifyContent 属性，您的图标将最终出现在 select 的左侧。
我们控制 value 道具的状态部分。从技术上讲，它并不是真正需要的，但我已经添加了它，因此我们可以在 select 为空时轻松恢复自定义 styles 道具，并在 Control 组件内具有占位符的初始行为。

这里是live example.

Multiple Selector，将选中的选项放在input元素下

Multiple Selector, put selected options under the input element

react-select