如何在使用React動態更改輸入文本時啓用Ctrl + Z？

Question

我正在嘗試創建一個簡單的React markdown editor。

該組件被完全控制。問題是：如果用戶在textarea中選擇了abc，並點擊了按鈕，我需要撥打onchange()和**abc**。我需要用這些星號包圍文本。

我在onchange()上傳遞的內容與用戶實際鍵入的內容之間的差異導致textarea歷史記錄變得不一致。 Ctrl + Z不起作用了。

Demo。 [編輯：此演示已修復實施。這不是當我問這個問題時]

如何在React上觸發onchange()使用任意文本並保持Ctrl + Z一致？

Answer 1

我沒有解決問題，但它可能是最好的，我可以做，而不重新執行歷史@Rishat提到（如果我錯了，請讓我知道）。

感謝this answer，我明白這個命令：

document.execCommand("insertText", false, text); 

這基本上插入在當前插入符號位置目前主要集中輸入text（這就是爲什麼你不通過輸入作爲一個參數） 。當然，這個功能會相應地更新歷史記錄。

如果我想，我可以協調每一個插入（如問題中提到的**），以便一切都會在歷史中。但是，這太複雜了，因爲每個降價命令都有不同的行爲。這太辛苦了。

解決方案：

下面的代碼必須是在componentDidUpdate和文本編程改變後只應執行：

// In order to minimize the history problem with inputs, we're doing some tricks: 
// - Set focus on the textarea 
// - Set the value back to its previous value. 
// - Select the whole text (that's the problem) 
// - Insert the new value 
this.refs.textarea.focus(); 
this.refs.textarea.value = previousText; 
setSelection(this.refs.textarea, 0, previousText.length); 
document.execCommand("insertText", false, text); 

影響

的Ctrl + Z完美地工作，但如果你繼續回去，直到輸入wa編程方式改變了，它會選擇整個文本。我的意思是，歷史被保留了下來，但是如果你足夠回溯的話，這會犧牲選擇。我相信這很好，比重新實現輸入歷史要好。

Demo。