javascript - 无法使用React中的defaultValue属性在<select>上呈现默认值

我的目标是在下拉列表中列出所有美国州名。如果stateName中有一个this.props（它将来自redux存储，以NY，KY或空字符串之类的值的形式出现），我希望下拉列表默认显示它。否则，我希望下拉列表默认显示“选择国家”，然后让用户选择它。我正在尝试在select标签上使用defaultValue属性，如下所示：

<select defaultValue={this.props.stateName}>
  { this.renderStateOptions("someParameter") }
</select>

这就是renderStateOptions函数的样子：

const stateNames = [{ name: 'Alabama', abbreviation: 'AL' }, { name: 'Alaska', abbreviation: 'AK' }]

renderStateOptions = () => stateNames.map(stateObj => <option key={stateObj.abbreviation} value={stateObj.name}</option>);

这里的问题是，即使我在this.props.stateName中有一个值（如NY，KY等），该下拉列表仍将“阿拉巴马州”显示为第一个/默认选项。现在，在renderStateOptions功能中，如果我将selected道具添加到正确的状态，则会收到Use the defaultValue or value props on <select> instead of setting selected on <option>.警告，这导致我首先使用defaultValue。我不确定设置defaultValue道具时缺少什么。

另外，当状态名称（空字符串）没有任何值时，我想显示“选择状态”作为禁用/隐藏选项。为了达到这个目的，我正在做以下事情：

<select defaultValue={this.props.stateName}>
  <option hidden>Select a state</option>
  { this.renderStateOptions("someParameter") }
</select>

这导致覆盖我获得的Alabama值，并且仅呈现Select a state选项，这很有意义。什么是处理这种情况的好方法？

最佳答案

好吧，defaultValue需要匹配value元素的option属性。

您的代码显示defaultValue是AL，而option设置为<option value="Alabama">

因此，您必须将defaultValue设置为Alabama或使用stateObj.abbreviation作为值。

关于javascript - 无法使用React中的defaultValue属性在<select>上呈现默认值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54914135/