为什么 React 将默认复选框值复制到属性？答案

【问题标题】：Why does React copy default checkbox value to attributes?为什么 React 将默认复选框值复制到属性？
【发布时间】：2018-01-09 16:14:30
【问题描述】：

live example

在这个例子中，你看到一个简单的 React 元素（<input>），它除了 type 和 id 之外没有任何属性，它使用 react-dom 渲染为根元素（<div id=root>）。由于某种原因，defaultValue 和 value 在实际 DOM 元素上都被初始化为“on”。为什么会这样？这是我应该报告的错误吗？

const React = require('react');
const ReactDOM = require('react-dom');

const checkboxNoValue = React.createElement('input', {
  type: 'checkbox',
  'id': 'checkboxElement'
});

ReactDOM.render(checkboxNoValue, root);

console.assert(
  checkboxElement.value === 'on',
  'value should return "on" by HTML spec, instead got: '
  + JSON.stringify(checkboxElement.value)
) // this works fine

console.assert(
  checkboxElement.getAttribute('value') === null,
  'value attribute should be empty, instead got: '
    + JSON.stringify(checkboxElement.getAttribute('value'))
)
console.assert(
  checkboxElement.defaultValue === '',
  'defaultValue should be empty, instead got: '
    + JSON.stringify(checkboxElement.defaultValue)
)

编辑

在第一次编辑问题时，我假设HTMLInputElement 的.value 属性也应该为空；这不是真的，如果没有设置，它实际上必须返回'on'：https://html.spec.whatwg.org/#dom-input-value-default-on

【问题讨论】：

我猜这样它可以适当地序列化它。

标签： javascript reactjs dom

【解决方案1】：

这不是 React 本身的问题。这是浏览器默认的行为方式。

来自 MDN：

如果省略了 value 属性，则为复选框的默认值已开启。

关于复选框元素的完整信息： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

【讨论】：

问题是按照规范，只有value必须返回'on'，defaultValue和value属性不能。我已经更正了我的示例以遵循规范，谢谢！
我不明白为什么第一个和第二个断言应该不同。您使用两种不同的方法获得相同的“值”，因此在这种情况下两者都应该是“打开”。请记住，您是从实际的 DOM 元素而不是 React 元素中获取它们的。对于 defaultValue，如果 value 未设置，非 React 输入元素确实会将其设置为空字符串，因此 React 可能正在设置它。我不知道这是否是设计使然。

【解决方案2】：

原来它实际上是 a bug，这应该在 2018 年初的 React 版本中修复。

【讨论】：