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

所以我意识到你能做到

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

真的
假的

选择你想要的

但在我的例子中，我使用的是React，它看起来是这样的：

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

{this.renderList（）}

所以我没有选择权。 我所拥有的是我想要作为默认值的选项的值。 我试图显示默认值并允许用户更改它

有没有办法使用AtterBute来使用此值并将默认值设置为该值

我想要的是：

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

{this.renderList（）}

---

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

您可以使用

标记的

值
属性在下拉列表中设置默认选项。也就是说，您可以按如下方式执行

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


{this.renderList（）}

请阅读更多关于它的文章

更新

您还可以设置默认值，如下所示。试试看

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


{this.renderList（）}

查看更多详细信息。
您可以通过使用
标记的
值
属性在下拉列表中设置默认选项。也就是说，您可以按如下方式执行

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


{this.renderList（）}

请阅读更多关于它的文章

更新

您还可以设置默认值，如下所示。试试看

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


{this.renderList（）}

查看更多详细信息。
您可以使用componentDidMount（）方法并将select Dom元素的值更改为默认值。
您可以使用componentDidMount（）方法并将select Dom元素的值更改为默认值。
此解决方案提供了此问题的解决方案，但也存在一些问题，比如刷新会破坏DOM，刷新时未正确设置值。没有刷新，一切都很好

在select上，我使用value和onChange

ex）

这个解决方案提供了一个问题的解决方案，但是也存在一些问题，比如刷新时会弄坏DOM，刷新时没有正确设置值。没有刷新，一切都很好

在select上，我使用value和onChange

ex）

Lal已经通过指出
value
和
defaultValue
回答了您的问题，但是您添加了以下注释：

DefaultValue最初仅加载一次，数据
{this.props.user.profile.item}在早期不可用，将
不加载

因此，如果我理解：您没有初始值，您希望在道具的值更改时从道具更新该值，但允许用户在更改后独立于原始值更改该值。在这种情况下，您应该使用：

利用这一机会对道具转换做出反应
通过使用
this.setState（）
更新状态来调用
render（）。
可以通过
this.props
访问旧道具。使命感
此函数中的.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>

组件将接收道具（下一步）{
if（this.state.item！=nextrops.user.profile.item）{
this.setState（{item:nextrops.user.profile.item}）；
}
}
handleChange=（事件）=>{
this.setState（{item:event.currentTarget.value}）；
}
{this.renderItems（）}
Lal已经通过指出
value
和
defaultValue
回答了您的问题，但是您添加了以下注释：

DefaultValue最初仅加载一次，数据
{this.props.user.profile.item}在早期不可用，将
不加载

因此，如果我理解：您没有初始值，您希望在道具的值更改时从道具更新该值，但允许用户在更改后独立于原始值更改该值。在这种情况下，您应该使用：

利用这一机会对道具转换做出反应
通过使用
this.setState（）
更新状态来调用
render（）。
可以通过
this.props
访问旧道具。使命感
此函数中的.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>

组件将接收道具（下一步）{
if（this.state.item！=nextrops.user.profile.item）{
this.setState（{item:nextrops.user.profile.item}）；
}
}
handleChange=（事件）=>{
this.setState（{item:event.currentTarget.value}）；
}
{this.renderItems（）}
试试
试试
嗨，拉尔，我已经试过那样做了，但问题是我不能换成另一个选项。这个下拉列表属于changeInfo部分，我打算显示已经设置的信息，然后允许用户根据需要更改到另一个选项。谢谢。@ys27如果您想要“非受控输入”，请使用
defaultValue
。您好，正如我在文章中提到的，我已经尝试过了，但它们不起作用。DefaultValue最初只加载一次，并且数据{this.props.user.profile.item}不可用，因此不会加载。除了值、默认值和占位符之外，还有其他选项吗？谢谢。@ys27您在帖子中没有提到时间问题，事实上，我甚至可以说这个答案是您问题的正确答案，但您的问题与您在评论中提出的问题不同。@Aaron我应该在问题中添加什么来让它更清楚？嗨，Lal，我已经尝试过这样做了，但问题是我不能换另一种选择。这个下拉列表属于changeInfo部分，我打算显示已经设置的信息，然后允许用户根据需要更改到另一个选项。谢谢。@ys27如果您想要“非受控输入”，请使用
defaultValue
。您好，正如我在文章中提到的，我已经尝试过了，但它们不起作用。DefaultValue最初仅加载一次，da