react.js - 为什么React中input设定了value(不设置onChange)后 就无法不能被修改了?

Question

demo

这个Demo中有两个 input,一个是 React组件中的input 一个是 通过document.createElement创建的input.
这两个input都设置了name和value. 他们之间的区别是:
第一个input无法输入,第二个input可以正常输入.

问题: 为什么会有这样的区别?

上面这段文字好像只在react中生效. 传统domAPI创建的input并没有这样的限制.

Answer 1

React中受控组件的概念。会有一个自动处理，在每次输入后将输入框恢复到指定的 value
�� <input> – React 中文文档

陷阱

如果传递了 value 但没有传递 onChange，那么将无法输入内容。当你通过传递 value 来控制输入框时，你需要保证输入框始终具有你传递的值。因此，如果你将一个 state 作为 value 传递，但在 onChange 事件处理程序中忘记同步更新该状态变量，React 将在每次输入后将输入框恢复到指定的 value。

---

DOM元素会有一个内置的 value 属性，也就是我们经常会遇到的 event.target.value。和我们在React/Vue 中绑定的 State 并不是同步的。
一般都是需要我们去手动监听 input/change 事件来收集DOM元素的 target.value，然后赋值给绑定的 state。同理 state 变更之后也需要去设置DOM元素的 target.value（只不过这一侧的修改多数都是由框架帮助实现了，Vue 是双向都自动处理了）。

之前在 Vue 的社区中遇到一个类似的问题 �� vue3中input的value和绑定的ref存在不同的问题 · vuejs/core · Discussion #7793 希望对你有帮助。

当时我还写的一篇相关的笔记 �� 绑定的 value 值和元素的 value 值

Answer 2

在React中，当你为<input>元素设置了value属性而没有同时设置onChange事件处理器时，你会遇到输入字段无法被用户修改的情况。这是因为React的受控组件（controlled components）机制。

解释

在React中，<input>, <textarea>, 和 <select> 元素等表单元素通常被称为“受控组件”，因为React通过其状态（state）来控制这些元素的值。当你为这些元素设置value属性时，React会期望你通过某种方式（通常是onChange事件）来更新这个值。

• 受控组件：在React中，表单数据（如用户输入）由React组件的状态管理。这意味着每当表单字段的值发生变化时，你应该更新组件的状态，从而触发组件的重新渲染，并显示新的值。这通常是通过在<input>元素上设置value属性并将其链接到组件的状态，并在onChange事件处理器中更新这个状态来实现的。
• 非受控组件：另一方面，非受控组件允许表单数据由DOM本身处理，而React组件不直接跟踪其值。这通常通过不设置value属性（或将其设置为undefined），并允许浏览器处理输入来实现。然而，在React中，通常推荐使用受控组件，因为它们提供了更一致和可预测的行为。

为什么React中的input无法被修改？

在你的例子中，React组件中的<input>元素被赋予了value属性，但没有提供onChange事件处理器来更新这个值。因此，React会保持这个value属性的值不变，即使DOM尝试更新它（例如，用户尝试输入文本）。这导致了一个看似“无法修改”的输入字段。

解决方案

要使React中的<input>元素可编辑，你需要添加一个onChange事件处理器，该处理器会更新组件的状态，从而允许React知道何时应该更新DOM中的值。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return <input type="text" value={this.state.value} onChange={this.handleChange} />;
  }
}

在这个例子中，每当用户输入文本时，onChange事件会被触发，handleChange方法会被调用，该方法会更新组件的状态，从而允许<input>元素显示新的值。