DOM要素を更新するには、React JSのリスナーが必要です

Question

DOM要素を変更するにはバインディング値にリスナーが必要なのはなぜですか？ 私はReactが自動的に実と仮想のDOMを比較してDOMの変更を把握していると思っていました。それでは、なぜリスナーが必要ですか？

例：次のコンポーネントを挿入すると、入力フィールドは変更できません。

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

これは、onChangeイベントハンドラを追加する場合にのみ変更できます。

Answer 1

上記の場合、入力属性の静的フィールドを設定する値属性を提供しているため、入力属性を編集できないため、入力フィールドを変更することはできません。

入力フィールドにデフォルト値を必要としない場合は、value属性を削除するだけで入力値を変更できます。入力値を処理するこの方法は、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> 
    ); 
    } 
}