更新DOM元素需要React JS中的列表器

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

示例：插入下列组件时，输入字段不能被修改。

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

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

来源

2017-01-10 Ilyès Youssef

，你可以提供你的意思的例子吗？ – sma

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

如果您不想在输入字段中使用默认值，则只需删除值属性即可修改输入值。处理输入值的这种方式称为uncontrolled input。你不需要这样的onchange监听器。

例

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

的另一种方法为具有controlled input由此更改状态变量来修改输入值。在这种情况下，你利用平变化听众

例

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> 
    ); 
    } 
}

来源

2017-01-10 16:58:23

谢谢，我知道这一点，我有意添加了价值属性。在纯HTML中，即使使用value属性也可以修改输入元素。这就是为什么它对我来说似乎很奇怪，它只是不适用于React JS，因为我认为React比较了虚拟和真实的DOM来更新元素。为什么在这个例子中不这样做？ –

@IlyèsYoussef所以，现在你明白了为什么你的输入不接受你输入的值 –

更新DOM元素需要React JS中的列表器

回答

相关问题