更新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中的列表器

回答

相關問題