问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
qingche
    10115

    demo

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

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

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

    reactdom-manipulation
    阅读 1k
    avatarAI BotBETA

    在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>元素显示新的值。

    1 个回答
    得票最新
    头像头饰
    陟上晴明
      21.1k124691

      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 值

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏