放<select>React 中 redux-form 的默認值

Question

這高於我的工資水平。 我試圖在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是額外的，因為初始值來自mapStateToprops的defaultValues

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

我已經嘗試了在<select>或<option>標簽中設置value 、 defaultValue和selected屬性的所有排列，但都沒有成功。

我們如何在下拉列表中設置初始值或默認值？

實際表單值設置正確，但該選項未在 gui 中設置。

編輯

只是為了向將來查看此線程的其他人澄清。 在renderDropDownField函數中根本不需要defaultValue renderDropDownField 。 您也不必在<select>或<option>指定屬性defaultValue 。

在{ initialValues: props.defaultValues }說，傳遞所有字段的所有默認值，包括我們的<select>組件的默認值。 例子：

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

和列表的選項像這樣

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

然后redux-form會自動加載form和gui中的默認值，只要默認值ie：在狀態匹配選項列表中的值之一。 這是我的問題。 我在狀態中有一個值，它不同於選項中的所有值。 下面的答案幫助我解決它。

Answer 1

這高於我的工資水平。 我試圖在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是額外的，因為初始值來自mapStateToprops的defaultValues

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

我已經嘗試了在<select>或<option>標簽中設置value 、 defaultValue和selected屬性的所有排列，但都沒有成功。

我們如何在下拉列表中設置初始值或默認值？

實際表單值設置正確，但該選項未在 gui 中設置。

編輯

只是為了向將來查看此線程的其他人澄清。 在renderDropDownField函數中根本不需要defaultValue renderDropDownField 。 您也不必在<select>或<option>指定屬性defaultValue 。

在{ initialValues: props.defaultValues }說，傳遞所有字段的所有默認值，包括我們的<select>組件的默認值。 例子：

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

和列表的選項像這樣

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

然后redux-form會自動加載form和gui中的默認值，只要默認值ie：在狀態匹配選項列表中的值之一。 這是我的問題。 我在狀態中有一個值，它不同於選項中的所有值。 下面的答案幫助我解決它。

Answer 2

這高於我的工資水平。 我試圖在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是額外的，因為初始值來自mapStateToprops的defaultValues

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

我已經嘗試了在<select>或<option>標簽中設置value 、 defaultValue和selected屬性的所有排列，但都沒有成功。

我們如何在下拉列表中設置初始值或默認值？

實際表單值設置正確，但該選項未在 gui 中設置。

編輯

只是為了向將來查看此線程的其他人澄清。 在renderDropDownField函數中根本不需要defaultValue renderDropDownField 。 您也不必在<select>或<option>指定屬性defaultValue 。

在{ initialValues: props.defaultValues }說，傳遞所有字段的所有默認值，包括我們的<select>組件的默認值。 例子：

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

和列表的選項像這樣

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

然后redux-form會自動加載form和gui中的默認值，只要默認值ie：在狀態匹配選項列表中的值之一。 這是我的問題。 我在狀態中有一個值，它不同於選項中的所有值。 下面的答案幫助我解決它。