預設輸入值並允許用戶更改

我對React有點熟悉，但是我已經進入了輸入問題。預設輸入值並允許用戶更改

我正在生成基於用戶輸入的輸入，所以如果他們選擇1，我會返回2個輸入框，然後我會返回4個輸入框。另外我想用輸入的數字預先填充輸入框。比方說，他們是最大和最小範圍

所以我有這樣的事情：

minArr = []; 
maxArr = []; 
for (let i = 0; i < this.state.userSelectInputAmount; i++) { 
    minArr.push(this.calculateMin(item); 
    maxArr.push(this.calculateMax(item); 
} 
return Array(this.state.userSelectInputAmount).fill().map((_, i) => { 
    return (
     <div className="form-group"> 
     <label> 
      <input className="form-control" 
       placeholder="Minimum Range" 
       type="number" 
       value={minArr[i]} 
       step="any" /> 
      <input className="form-control" 
       placeholder="Maximum Range" 
       type="number" 
       step="any" 
       value={maxArr[i]} /> 
     </label> 
     </div>

的min和max是分裂，各自對用戶輸入說，他們選擇1則範圍可以從1 to 10 。如果他們選擇2然後1 to 5和6 to 10。

使用value允許我重新選擇選項，但不允許用戶自定義它們自己的輸入（1 to 7而不是1-10）。讀取文檔時，defaultValue不應該是一個好選擇，因爲我希望將來能夠重新渲染（即用戶輸入）。有任何想法嗎？

來源

2016-09-18 kermitvomit

您會希望保持所有輸入的當前值處於狀態（或者在流量實現中，但最簡單的解決方案處於狀態）。用所需的默認值初始化所有值，並將其作爲value傳遞給每個輸入。然後每個輸入應該有一個onChange處理程序，該處理程序調用setState來更新該值。這樣，當用戶更改輸入時，狀態會更新以反映新的更改，然後更新輸入以顯示用戶鍵入的相同值。這聽起來有點愚蠢，但這是React的慣例。

來源

2016-09-18 05:41:52

感謝您的建議，它引導我保持'價值'的道路。所以我有類似的設置，除了現在我把所有'minArr'和'maxArr'存儲爲一個狀態，並且我可以遍歷這些值。我如何設置它有什麼問題。我仍然有'價值= {this.state.minArr [我]'我真的想使用'this.state.value'，但它不會工作，因爲我得到我的價值預加載到'minArr/maxArr' – kermitvomit

罐你更新你的問題以包含這段代碼？根據你的描述，我不能完全遵循。 –

嗚！所以我認爲我更好地遵循了這一點，但主要關鍵在於使用'refs'來解析當前輸入:) – kermitvomit

所以我用defaultValue但我用onChange={this.forceUpdate}現在它的工作。

來源

2016-09-18 10:02:29 kermitvomit

這不太適合使用forceUpdate。請參閱[文檔]（https://facebook.github.io/react/docs/component-api.html#forceupdate）「通常，您應該儘量避免使用forceUpdate（），並且只能從this.props和this中讀取.state in render（）。這使得你的組件「純粹」並且你的應用程序變得更簡單和更高效。「 –

預設輸入值並允許用戶更改

回答

相關問題