在 React 中使用 redux-form 设置 <select> 默认值

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 属性的所有排列，但都没有成功。

How can we set the initial value, or the default value in a drop down list?

实际表单值设置正确，但选项未在 gui 中设置。

编辑

只是为了向以后查看此主题的其他人澄清。在 renderDropDownField 函数中根本不需要 defaultValue 属性。您也不必在 <select> 或 <option>.

中指定属性 defaultValue

在 { initialValues: props.defaultValues } 中说一个是传递所有字段的所有默认值，包括我们的 <select> 组件的默认值。示例：

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

列表的选项如下所示

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

然后 redux-form 将自动加载表单和 gui 中的默认值，只要默认值即：状态与选项列表中的值之一匹配。这是我的问题。我在州内有一个值，该值与选项中的所有值都不同。下面的答案帮助我解决它。

Answer 1

您是否尝试过将 defaultValue 属性传递给 select？

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>

Answer 2

最简单的方法是使用 JSX 属性 defaultValue={...}

<Row className="form-group">
    <Label htmlFor="rating" xs={12}>Rating</Label>
    <Col xs={12}>
        <Control.select model=".rating" name="rating" id="rating"className="form-control" 

            **defaultValue={1}**              >

              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
        </Control.select>
    </Col>
</Row>

在 React 中使用 redux-form 设置 <select> 默认值

Set <select> default value with redux-form in React

javascript

reactjs

redux-form