javascript - 为什么 React 说不要在 <option> 元素上设置 'selected' 属性?

标签 javascript html reactjs jsx

[edit] 这是我自己的困惑,抱歉。

设置selected属性(property) <option> JSX 中的元素完美运行,但它会导致 React 抛出警告:

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

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

设置value parent 的属性(property)<select> element 迫使我添加一个 onChange 处理程序,在组件状态中设置值,并编写一堆额外的代码来完成简单设置 selected 的操作。在 <option> 上elements 只用一个词。

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

最佳答案

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

如果按照他们建议的方式进行操作,您可以渲染 <SELECT>具有“值”属性的组件。然后您需要为 onChange 事件编写处理函数,以确保组件重新呈现以反射(reflect)用户更改的选择。

如果您尝试在个人级别管理此信息流 <OPTION>元素,我想你会遇到同样的挑战,然后是一些。例如,假设在页面加载时选择了选项 A。然后用户选择选项 B。选项 B 需要重新渲染才能显示为选中状态,而选项 A 需要重新渲染才能显示为未选中状态。对于选项 B 上的 onClick 事件触发选项 A 的更改,信息必须从选项 B 传递到父 Select 元素,然后向下传递到选项 A 元素。

React 文档还谈到了一个“不受控制的”<SELECT>元素,我认为这意味着它最初会渲染一次(你可以为它指定一个默认值,但 React 不会一直实时重新渲染它。

关于javascript - 为什么 React 说不要在 <option> 元素上设置 'selected' 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36704166/

相关文章:

javascript - 通过react-router重复使用相同的组件两次

javascript - AJAX 请求未使用 $.when(...) 并行执行

javascript - 正则表达式选择没有空格的文本有限制

javascript : how to distinguish between selected element list and form

html - 将标签保留在从同一点开始的两条线上?

javascript - 如何使用 es6 从模块中导入所有内容?

javascript - 如何减少过度冗余的 for 循环

html - 即使页面放大或缩小,如何保持固定的背景图像大小?

javascript - 文本框的字符限制

reactjs - 自动预测在 iOS 13 中无法使用 textContentType 到 TextInput