更新DOM元素需要React JS中的listner

Question

为什么绑定值需要侦听器来更改Dom元素。我认为React会自动比较真实的和虚拟的DOM，以找出DOM中的变化。那它为什么还需要一个监听器。

示例:插入以下组件时，输入字段不能修改。

class Header extends React.Component {
   render() {
      return (
         <div>
            <input type="text" value="xxx" />
         </div>
      );
   }
}

只能在添加onChange事件处理程序时修改。

Answer 1

在上述情况下，无法修改输入字段，因为您提供的value属性为输入属性设置了静态字段，因此您无法对其进行编辑。

如果您不需要输入字段的默认值，只需删除value属性，您就可以修改input的值。这种处理输入值的方式称为uncontrolled input。为此，您不需要onchange侦听器。

示例

class Header extends React.Component {
   render() {
      return (
         <div>
            <input type="text" />
         </div>
      );
   }
}

使用controlled input的另一种方法是更改状态变量以修改输入值。在本例中，您将使用onchange侦听器

示例

class Header extends React.Component {
   constructor() {
      this.state = {
          inp: 'xxx'
      }
   }
   render() {
      return (
         <div>
            <input type="text" value={this.state.inp} onChange={(e) => this.setState({inp: e.target.value})} />
         </div>
      );
   }
}