刪除小數點時，反應受控數字輸入跳轉

我在React應用程序中輸入受控數字，當刪除小數點右側的所有數字時，小數點本身將被刪除。所以，當我有1.1，並刪除最右邊的1，它應該離開1.;但該點也會自動移除，並保留1，並將光標移到前面。刪除小數點時，反應受控數字輸入跳轉

舉個最簡單的例子，看這個小提琴：https://jsfiddle.net/sashee/e00s7h9d/。只需在輸入上按退格鍵即可觀察行爲。

經過一番谷歌搜索後，我認爲問題的根源在於1.被視爲1，並且無法從輸入中提取當前值。

因此，當我刪除了最右邊1，發生以下情況：

的變化處理程序被調用
值爲1
陣營更新狀態，以1
值現在輸入值爲1，而不是1.

正如我所看到的，這不是一個錯誤，而是一個奇怪的結果回覆。是否有任何使用數字輸入的解決方法？還是應該回到常規的文字輸入？

更新：

它工作正常，在Firefox，而不是在Chrome。

來源

2017-02-08 sashee

原來是在陣營本身就是一個錯誤，請參閱this PR。

它是從15.5.4開始固定，看this fiddle：

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

來源

2017-04-13 08:57:30 sashee

工作正常。謝謝 – Madhu

當您刪除進行小數點的數字時，您是否有理由將該小數點位置置於原位？這不像一個React問題，因爲它更像一個普通的HTML問題。就像您提到的那樣，如果您希望輸入數字時顯示小數點，則可以將type="number"更改爲type="text"。

另外，我想指出，在您的初始狀態下，您將值設置爲一個字符串，然後字符串"1.1"被強制轉換爲數字1.1。爲了保持一致性，你應該設置初始狀態的號碼，如果您輸入type="number"或保持初始狀態爲一個字符串，改變輸入到type="text"

如果你想在框中遞減0.1每隔數遞增或按向上或向下箭頭時，將step更改爲step="0.1"。

來源

2017-02-08 19:01:29

其實，e.target.value返回一個字符串，而不是數字，所以它是一致的。對此的一個可能的用例是將1.1更改爲1.25。在這種情況下，我單擊最後一個，刪除最後一個，然後輸入25.但是，隨着我編輯的編號發生更改，我無法執行此操作。 – sashee

哦，我現在看到了這個問題，我很抱歉我誤解了這個問題。我相信這個問題提供了很好的洞察OP的問題： http://stackoverflow.com/questions/39672804/failed-to-parse-4-to-4?noredirect=1&lq=1 –

問題是，您正在將您的input定義爲type="number"，但是您要向其中投入一個字符串。當字符串"1."轉換爲數字時，會丟失小數值。

// Example of string "1." getting converted to a number 
parseInt("1.", 10) // 1

如何解決：

由於@Yo脅田說，在他的回答，只是用一個字符串輸入。然而！您可以輕鬆地禁止非數字與正則表達式：

_onChange(e) { 
    // This will match all signed/unsigned floats 
    // Pattern credit: http://stackoverflow.com/a/16951568/2518231 
    // You'll probably want to store this as a default prop so that it isn't generated on every onChange 
    var regex = new RegExp(/^-?\d*\.?\d*$/); 

    if (regex.test(e.target.value)) { 
    this.setState({val: e.target.value}) 
    } else { 
    alert('Sorry, only numbers are allowed.'); 
    } 
},

來源

2017-02-08 19:52:56

刪除小數點時，反應受控數字輸入跳轉

回答

相關問題