Question

所以我意识到你可以做到

<select>
    <option value="true">True</option>
    <option value="false" selected >False</option>
</select>

选择你想要的东西。

但在我的情况下，我使用的是React，它看起来像这样：

<select>
    {this.renderList()}
</select>

所以我无法访问这些选项。我所拥有的是我想要的选项作为默认值。我试图显示默认值并允许用户更改它。

有没有办法使用attirbute来使用这个值并设置默认值？

我想要的是什么：

<select default={this.props.user.profile.item}>
    {this.renderList()}
</select>

就属性而言，我尝试了占位符（无效果），defaultValue（无效果）和值（显示，但无法更改）。

Answer 1

您可以使用value标记的<select>属性在下拉列表中设置默认选项。也就是说，您可以按照以下方式执行此操作

<select value={this.props.user.profile.item}>
    {this.renderList()}
</select>

请在docs

中详细了解相关信息

<强>更新

您也可以设置默认值，如下所示。试试吧..

<select defaultValue={this.props.user.profile.item}>
    {this.renderList()}
</select>

查看here了解详情..

Answer 2

您可以使用componentDidMount（）方法并将选择Dom元素的值更改为默认值。

Answer 3

此解决方案提供了解决问题的方法，但是存在诸如刷新搞砸DOM以及刷新时未正确设置值等问题。一切都很好，没有刷新。

在选择中，我使用value和onChange。

ex）

<select onChange={this.changeItem} value= 
              {this.props.user.profile.item}
              ref="item">
    {this.renderItems()}
</select>

单独，函数changeItem：

changeItem() {
    this.setState({
        item: ReactDOM.findDOMNode(this.refs.item).value
     });
}

Answer 4

Lal已经通过指出value和defaultValue回答了您的问题，但随后您添加了此评论：

DefaultValue最初只加载一次和数据 {this.props.user.profile.item}早期和将来都不可用不加载。

因此，如果我理解：您没有初始值，您希望在更改时更新props中的值，但允许用户随后更改该值而不依赖于原始值。在这种情况下，您应该使用componentWillReceiveProps：

以此为契机，对之前的道具过渡作出反应通过使用render()更新状态来调用this.setState()。可以通过this.props访问旧道具。调用此函数中的this.setState（）不会触发额外的渲染。

示例：

componentWillReceieveProps(nextProps) {
    if (this.state.item != nextProps.user.profile.item) {
        this.setState({item: nextProps.user.profile.item});
    }
}

handleChange = (event) => {
    this.setState({item: event.currentTarget.value});
}

<select value={this.state.item} onChange={this.handleChange}>
    {this.renderItems()}
</select>

HTML选择：将默认设置为给定值，而不是选项列表

4 个答案: