用空字符串反應受控組件的輸入值

Question

我在下面為測試React controlled component input功能編寫了一個演示。 但是似乎有一個錯誤。

 class TestComponent extends React.Component{ constructor() { super(); this.state = {value: 'beef'}; this.handleValueChange = this.handleValueChange.bind(this); } handleValueChange(e) { this.setState({value: e.target.value}); } render() { return <div> <div><input type='text' value={'hello world'} onChange={this.handleValueChange}/></div> <div><input type='text' value={''} onChange={this.handleValueChange}/></div> <div><input type='text' value={this.state.value} onChange={this.handleValueChange}/></div> <div><input type='text' value={null} onChange={this.handleValueChange}/></div> <div><input type='text' value={undefined} onChange={this.handleValueChange}/></div> <hr/> <div><input type='text' defaultValue={this.state.value} onChange={this.handleValueChange}/></div> <p>{this.state.value}</p> </div> } } ReactDOM.render( <TestComponent />, document.body ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

第一個input具有指定的字符串值屬性。 當我鍵入內容時，調用handleValueChange函數，結果是hello world + your type thing's first character 。

第二個input具有空字符串值屬性。 當我鍵入內容時，它會調用handleValueChange函數，但最后，它總是給我一個字符。

有點奇怪。

更新！ 我添加了帶有defaultValue的input ，與value={this.state.value} ，我的頭被弄亂了。

Answer 1

如您的問題下面的評論中所述：請刪除value={''}因為這將在每次呈現輸入時清空輸入。

根據react docs ，正確的方法是

return <div>
  <input type='text' value={this.state.value} onChange={this.handleValueChange}/>
  <p>{this.state.value}</p>
</div>

這樣，無論何時在輸入區域中鍵入內容，都將更新狀態中設置的值。

如果要使用狀態值設置渲染組件，則可以使用：

getInitialState() {
  return { value: 'Your default value'}
}

或者，如已經建議的那樣，使用defaultValue 。

在此處閱讀更多信息： https : //facebook.github.io/react/docs/forms.html

---

更新：

根據您更新的問題，我認為您必須了解在渲染功能期間設置值的實際作用。 只要在渲染功能期間設置一個值，就將輸入字段“鎖定”為該特定值。 意味着用戶輸入將不會對渲染的元素產生任何影響。 從文檔中： "User input will have no effect on the rendered element because React has declared the value" 。

要解決此問題，您必須將value設置為可以動態更改的值，在這種情況下，它將是value或this.state.value 。 就像您在第三個示例中所做的那樣：

<input type='text' value={this.state.value} onChange={this.handleValueChange}/>

這樣，React接受用戶輸入提供的值，然后在此之后將更新組件的值。

我仍然認為文檔對此進行了明確說明，並且我認為您應該閱讀原始答案中提供的文檔。

---

更新2

要稍微清除帶有controlled和uncontrolled組件的零件，請執行以下操作：

controlled組件是分配了value屬性的組件，它將反映來自用戶輸入的value prop （ value prop ）。

雖然uncontrolled組件沒有分配任何value屬性，並且不會反映用戶輸入的值（因為它不提供任何value prop ）。 但是，如果要使用值實例化uncontrolled組件，則應使用defaultValue 。

在您的情況下（因為嘗試使用CONTROLLED組件），這意味着您不應使用defaultValue ，而應堅持正確實施controlled組件。 那是使用value={this.state.value} 。

再次，我建議閱讀提供的文檔。 如果您能夠理解文檔，實際上並不難。

希望這可以解決您的一些問題！ :)

Answer 2

使用defaultValue代替value

render() {
return <div>
  <div><input type='text' defaultValue={'hello world'} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={''} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={this.state.value} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={null} onChange={this.handleValueChange}/></div>
  <div><input type='text' defaultValue={undefined} onChange={this.handleValueChange}/></div>
  <p>{this.state.value}</p>
 </div>
 }
}

Answer 3

這里唯一正確的controlled component是：

<input type='text' value={this.state.value} onChange={this.handleValueChange}/>

其他人不控制。 但是，由於其他對象也正在調用setState並更改值，因此它們會影響第三個輸入。

走着瞧吧：

• 第一個輸入將使用e.target.value = hello world + first character you typed調用setState 。 這將是第三個輸入的新值
• 第二個輸入將調用setState只有一個字符，因為該輸入的值總是'' 。 所以一個字符將是第三個輸入的新值
• 第四輸入與第二輸入相同
• 最后一個輸入，因為該值設置為undefined …就像您未在其中定義任何值一樣，因此第四個輸入將不受控制，但是每次鍵入時，它將其實際值復制到第三個輸入

結論：

• 要獲得受控輸入，請始終將值設置為您要控制的更改（狀態或道具）。
• 使用不同的輸入更改狀態的同一部分時要小心...推理起來真的很復雜。