Multiple Selector, поместите выбранные параметры под элемент ввода - PullRequest
Новая
       1

Multiple Selector, поместите выбранные параметры под элемент ввода

0 голосов
/ 10 мая 2019

Итак, я хочу поместить выбранные параметры в селектор нескольких массивов под полем выбора, и мне интересно, есть ли какой-нибудь умный способ сделать это, чем просто с помощью 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) {

}

1 Ответ

0 голосов
/ 13 мая 2019

Настоятельно рекомендуем использовать метод 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 часть заменяется styles реквизитом. Вы можете видеть, что есть два места, которые нуждаются в обновлении; контейнер control и valueContainer. Если вы не обновите justifyContent свойство control, ваши значки окажутся в левой части селектора.
  2. Государственная часть, где мы контролируем value реквизит. Технически это на самом деле не нужно, но я добавил его, чтобы мы могли легко возвращать пользовательские реквизиты styles, когда выбор пуст и иметь начальное поведение с заполнителем внутри компонента Control.

Здесь живой пример .

...