为啥 React 说不要在 <option> 元素上设置 'selected' 属性？

Posted 2023-02-21

【中文标题】为啥 React 说不要在 <option> 元素上设置 \'selected\' 属性？

【英文标题】：Why does React say not to set 'selected' property on <option> elements?为什么 React 说不要在 <option> 元素上设置 'selected' 属性？

【发布时间】：2016-08-10 19:00:54

【问题描述】：

[edit] 这是由于我自己的困惑，道歉。

在 JSX 中为 <option> 元素设置 selected 属性效果很好，但它会导致 React 抛出警告：

Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>.

在父 <select> 元素上设置 defaultValue 会导致 <select> 的 value 默认为该设置，但不会设置默认选中的 <option>。因此，这会使用户看到的内容与实际选择的内容不同步。

在父 <select> 元素上设置 value 属性迫使我添加一个 onChange 处理程序，将值设置为组件状态，并编写一堆额外的代码来完成简单地设置 selected <option> elements 只用一个词。

有人知道为什么 React 会抛出这个警告吗？我不想编写一堆额外的代码来删除似乎与现实不相符的警告。据我所知，它工作得很好，那我为什么不使用它呢？

【问题讨论】：

你说defaultValue 没有“设置默认选择<option>”对我来说似乎是什么意思？

<select defaultValue="B"> <option>"A"</option> <option>"B"</option> <option>"C"</option> </select> 在该代码示例中，当组件首次呈现时，选择元素的值是“B”，但用户看到的“默认选择”是 A，因为它会是如果我没有设置 defaultValue 道具。

嗯？但事实并非如此.. jsfiddle.net/69z2wepo/39163

是的，你是对的，对不起。我恳求暂时的精神错乱。我试图将 defaultValue 匹配到选项的内容而不是选项的值（在我的用例中是不同的）。很抱歉造成混乱。

@rodwa4: “我试图将 defaultValue 匹配到选项的内容而不是选项的值（在我的用例中是不同的）” ，这不是select 元素的工作方式。值是 值，而不是文本，它们不同。

【参考方案1】：

以下是伴随该警告的 React 文档： https://facebook.github.io/react/docs/forms.html

如果您按照他们建议的方式进行操作，您可以使用“值”属性渲染您的 <SELECT> 组件。然后，您需要为 onChange 事件编写一个处理函数，以确保组件重新渲染以反映用户更改的选择。

如果您尝试在单个 <OPTION> 元素级别管理此信息流，我认为您将面临相同的挑战，然后是一些挑战。例如，假设在页面加载时选择了选项 A。然后用户选择选项 B。选项 B 需要重新渲染才能显示为选中，选项 A 需要重新渲染才能显示为未选中。要使选项 B 上的 onClick 事件触发选项 A 的更改，必须将信息从选项 B 传递到父 Select 元素，然后再传递到选项 A 元素。

React 文档还谈到了一个“不受控制的”<SELECT> 元素，我认为这意味着它最初会渲染一次（您可以为其指定一个 defaultValue，但 React 不会继续实时重新渲染它.

【讨论】：

嗯，我想我明白你在说什么，但它似乎与实际发生的情况不一致。这是我的代码：<select> <option key=1>Option A</option> <option key=2 selected>Option B</option> <option key=3>Option C</option> </select> 该代码根本不像您描述的那样。它最初以“选项 B”和“选项 B”的值呈现。当用户单击并选择“选项 C”或“选项 A”时，相应的选定选项现在既被选中，又被选中。它只是简单地工作，无需额外的跑腿。