具有默认值问题的选择器标记 (JSX)

Question

选择器标记中的 defaultValue 属性无法按预期工作。我有一个包含一些字段和一些选择器字段的表单组件。现在，当从另一个组件按下编辑按钮时，我需要预先填充表单。我用this.props.history.push({ pathname: "/Register", prePopulate: res.data.data });传递数据

我使用 this.props.location.prePopulate 访问数据。

我将新值设置为状态，表单字段会加载以前的数据。问题在于不显示先前选择的选项的选择器。我尝试使用 defaultvalue 属性并传递 this.state.value 值，但它不起作用。如果我对一个选项进行硬编码，它可以工作，但当它试图从状态中拉出时却不行。

<select
                        className={classnames("form-control form-control-sm", {
                          "is-invalid": this.state.valEmergency
                        })}
                        name="emergency"
                        onChange={this.onChange}
                        defaultValue={this.state.emergency}
                      >
                        <option value="">Choose your level</option>
                        <option value="PRIMARY">Primary</option>
                        <option value="SECONDARY">Secondary</option>
                        <option value="TERTIARY">Tertiary</option>
                      </select>

Answer 1

您可以使用 value 属性并使用 onChange={this.onChange} 处理更改。所以不要使用defaultValue={this.state.emergecy}，而是使用value={this.state.emergency}