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

Question

所以我意识到你可以做到

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

选择你想要的。

但就我而言，我使用的是 React，它看起来像这样：

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

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

有没有办法使用属性来使用这个值并将默认值设置为那个？

我想要什么：

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

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

Answer 1

您可以使用<select> 标记的value 属性在下拉列表中设置默认选项。也就是说，你可以这样做

<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() 方法并将 select Dom 元素的值更改为默认值。

Answer 3

这个方案提供了一个解决方案，但是存在刷新搞砸DOM、刷新时值设置不正确等问题。一切正常，无需刷新。

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

例如）

<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:

以此为契机，在之前对道具过渡做出反应 通过使用this.setState() 更新状态来调用render()。 旧道具可以通过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>