Question

这是一个SSCCE来说明我的问题： const React = require（'react'）; const App = React.createClass（{ getInitialState：function（）{ 返回{ 文字：'foo'，选择：'苹果' }; } ，render：function（）{ 回来（＆LT; DIV＆GT; ＆LT; DIV＆GT; ＆lt; input type ='text'value = {this.state.text} /＆gt; ＆LT; / DIV＆GT; ＆LT;选择＆GT; ＆lt; option value ='bananas'selected = {this.state.selection ==='bananas'}＆gt; bananas＆lt; / option＆gt; ＆lt; option value ='apples'selected = {this.state.selection ==='apples'}＆gt; apples＆lt; / option＆gt; ＆lt; option value ='onion'selected = {this.state.selection ==='onions'}＆gt; onion＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; / DIV＆GT; ）; } }）; 渲染时，上面的React组件显示（不出所料）下面的视图：该模型按预期考虑在内。当一个人试图输入＆lt; input＆gt;元素没有任何反应解释是ReactJS使用单向流，你必须添加onchange监听器来更新模型等。这很好。我没有得到的是为什么ReactJS阻止＆lt; input＆gt;更改元素并强制它始终反映流向它的模型值，而同时它允许我更改＆lt; select＆gt;元件：显然我的心理模型缺乏。我错过了什么？

Answer 1

您很难将value编码为this.state.text，因此每次按键时它都会一直相同。请参阅forms documentation。

Answer 2

这里有一个受控 <input>元素和一个不受控制的 <select>元素。见controlled components

可以通过不指定value道具来创建不受控制的文本输入。

可以通过指定select道具来创建受控value元素。

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

有专门解释这个的文件。见here

为什么ReactJS抑制<input />元素的变化，但不抑制<select>元素

2 个答案: