Использование реакции-выбора для создания разметки с помощью начальной загрузки 4 - PullRequest
Новая
       40

Использование реакции-выбора для создания разметки с помощью начальной загрузки 4

0 голосов
/ 16 января 2019

Я новичок в react-redux. Здесь я пытаюсь добиться следующей разметки

enter image description here

Итак, отсюда я получил следующий код: 

<div className="row">
        <div className="col-md-12">
          <form className="form-inline">
            <div className="form-group col-md-4">
              <lable>Select Technolgoy </lable>
              <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
              />
            </div>
            <div className="form-group col-md-4">
              <lable>Select Component </lable>
              <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={options}
              />
            </div>
            <div className="form-group col-md-4">
              <lable>Select Job </lable>
              <button className="btn btn-primary">
                Add
              </button>
              <button className="btn btn-primary">
                Remove
              </button>
            </div>
          </form>
        </div>
      </div>

enter image description here

Итак, здесь я использую react-select.

Что я делаю не так? Кто-нибудь может мне с этим помочь? Спасибо

1 Ответ

0 голосов
/ 17 января 2019

Вам необходимо обновить стиль выбора, например, следующие строки: 

const styles = {
  container: base => ({
    ...base,
    flex: 1
  })
};

function App() {
  return (
    <div className="row">
      <div className="col-12">
        <form className="form-inline">
          <div className="form-group col-4">
            <lable>Select Technolgoy </lable>
            <Select styles={styles} options={options} />
          </div>
          <div className="form-group col-4">
            <lable>Select Component </lable>
            <Select styles={styles} options={options} />
          </div>
          <div className="form-group col-4 row">
            <lable className="col-4">Select Job </lable>
            <button className="btn btn-primary col-4">Add</button>
            <button className="btn btn-primary col-4">Remove</button>
          </div>
        </form>
      </div>
    </div>
  );
}

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

...