Javascript 设置<；选择>；React中带有redux表单的默认值

这比我的薪水高。我试图在

redux表单中放置一个下拉列表

，并使用默认值初始化它，就像它为

所做的那样

自定义下拉组件的设置如下所示：

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>

我在

或

标记中尝试了设置

值

、

默认值

和

选择

属性的每一种排列方式，但运气不佳

如何在下拉列表中设置初始值或默认值

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

编辑

我只是想澄清一下，将来任何人都会看到这条线索。

renderDropDownField

函数中根本不需要

defaultValue

属性。也不必在

或

中指定属性

defaultValue

假设在

{initialValues:props.defaultValues}

中，传递所有字段的所有默认值，包括

组件的默认值。例如：

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

列表中的选项是这样的

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

---

然后，

redux表单

将自动在表单和gui中加载默认值，只要默认值（即：处于状态）与选项列表中的一个值匹配。这是我的问题。我的状态值与选项中的所有值不同。下面的答案可以帮助我排除故障

您是否已尝试将defaultValue属性传递给选择

const renderDropDownField=（{input，label，values，defaultValue}）=>(
{label}
{values.map（（值，索引）=>(
{value}
))}

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

评级
1.
2.
3.
4.
5.

initialValues在这里可能会有所帮助：您是否可以检查在RenderDropDownComponent中是否确实获得了defaultValue？我已经添加了一个console.log语句，并且它可以正常运行。defaultValue与redux表单无关。您可以在这里仅使用react查看示例代码。您的解决方案有效。该值通过props.default values传递与任何列表选项都不匹配。

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

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

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>