时间戳

首页 > 解决方案 > 多重选择器，将选中的选项放在输入元素下

react-select - 多重选择器，将选中的选项放在输入元素下

问题描述

所以，我想将选定的选项放在选择字段下方的多数组选择器中，我想知道是否有比仅使用 css 更聪明的方法来实现这一点？

我想要这样的东西：https ://imgur.com/thKWvYe

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

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

请暂时忽略选择器。

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

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

}

标签： react-select

解决方案

强烈建议您使用 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>
    );
  }
}

有两个重要的部分：

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

这里有一个活生生的例子。

推荐阅读