爲什麼ReactJS會抑制<input>元素的變化，但不會在例如<select>元件

Question

這裏的一個SSCCE來說明我的問題：

const React = require('react'); 

const App = React.createClass({ 
    getInitialState: function() { 
     return { 
      text: 'foo', 
      selection: 'apples' 
     }; 
    } 
    , render: function() { 
     return (
      <div> 
       <div>     
        <input type='text' value={this.state.text}/> 
       </div> 
       <select> 
        <option value='bananas' selected={this.state.selection==='bananas'}>bananas</option>     
        <option value='apples' selected={this.state.selection==='apples'} >apples </option>      
        <option value='onions' selected={this.state.selection==='onions'} >onions </option>     
       </select> 
      </div> 
     ); 
    } 
}); 

呈現時將上述陣營部件，顯示器（不出所料）以下觀點：

該模型考慮到如預期。

當您嘗試鍵入<input>元素時，什麼都不會發生。解釋是ReactJS使用單向流程，並且您必須添加onchange監聽器來更新模型等。這很好。

我不明白的是爲什麼ReactJS防止<input>元素更改，並迫使其始終反映向下流動到它的模型值，而在同一時間，它可以讓我改變<select>元素：

顯然，我的心智模式是缺乏。我錯過了什麼？

Answer 1

你在這裏什麼是控制<input>元素和不受控制<select>元素。請參閱controlled components

它可能通過未指定value prop來創建不受控制的文本輸入。

通過指定value prop可以創建受控的select元素。

<select value={this.state.value}> 
    <option value="bannanas">bananas</option> 
    <option value="apples">apples</option> 
    <option value="onions">onions</option> 
</select> 

有具體解釋這個的文件。請參閱here

Answer 2

你很難編碼value爲this.state.text，所以它在每次擊鍵時總是相同的。請參閱forms documentation。