Установите значение <select>по умолчанию с помощью приставки в React - PullRequest
Новая
       7

Установите значение <select>по умолчанию с помощью приставки в React

0 голосов
/ 25 августа 2018

Это выше моего paygrade.Я пытался поместить раскрывающийся список в redux-form и инициализировать его значением по умолчанию, как это было сделано для <input>.

. Пользовательский раскрывающийся компонент настроен следующим образом: 

const renderDropDownField = ({ input, label, values, defaultValue }) => (
  <Container>
    <Row>
      <Col sm="6">
        <label className="input-label">{label}</label>
      </Col>
      <Col sm="6">
        <Row>
          <select className="dropdown-list" {...input} >
            {values.map((value, index) => (
              <option key={value} value={value}>{value}</option>
            ))}
          </select>
        </Row>
      </Col>
    </Row>
  </Container>

Тогда поле в форме 

  <Field
    name="shuffle"
    component={renderDropDownField}
    label="SHUFFLE [ YES/NO ]:"
    values={props.list.shuffle.values}         // from parent
    defaultValue={props.list.shuffle.default}  // from parent
  />

Пропеллер defaultValue в поле является дополнительным, поскольку начальные значения получены из defaultValues из mapStateToprops 

const mapStateToProps = (state, props) => ({
  enableReinitialize: false,
  keepDirtyOnReinitialize: true,
  initialValues: props.defaultValues
})

Я пробовал каждую перестановку установки атрибутов value, defaultValue и selected в теге <select> или <option> безуспешно.

Как мы можем установить начальное значение или значение по умолчанию в раскрывающемся списке?

Фактическое значение формы установлено правильно, но опция не установлена ​​в графическом интерфейсе.

РЕДАКТИРОВАТЬ

Просто чтобы уточнить, кто еще заглядывает в эту ветку в будущем.Опора defaultValue не требуется вообще в функции renderDropDownField.Также вам не нужно указывать атрибут defaultValue в <select> или <option>.

Скажем, в поле { initialValues: props.defaultValues } передаются все значения по умолчанию для всех полей, включая значение по умолчанию для нашего <select> компонент.Пример: 

this.state = {
  defaultValues: {
    shuffle: "No"
  }
};

и параметры для списка, например, 

this.dropdownListOptions = {
    shuffle: {
      values: ["Yes","No"]
    }
  };

Тогда redux-form автоматически загрузит значение по умолчанию в форме и графическом интерфейсе до тех пор, пока значение по умолчаниют.е.: в состоянии совпадает одно из значений в списке опций.Это была моя проблема.У меня было значение в состоянии, которое отличалось от всех значений в опции.Ответ ниже поможет мне разобраться с этим.

1 Ответ

0 голосов
/ 25 августа 2018

Вы пытались передать значение defaultValue для выбора? 

const renderDropDownField = ({ input, label, values, defaultValue }) => (
  <Container>
    <Row>
      <Col sm="6">
        <label className="input-label">{label}</label>
      </Col>
      <Col sm="6">
        <Row>
          <select defaultValue={defaultValue} className="dropdown-list" {...input} >
            {values.map((value, index) => (
              <option key={value} value={value}>{value}</option>
            ))}
          </select>
        </Row>
      </Col>
    </Row>
  </Container>
...