问题描述
我正在使用 github 示例代码,但状态值似乎没有更新。我意识到 react setState
是异步工作的,但情况似乎并非如此。
在 handleTextAreaChange
中,我将状态设置为:
const handleTextAreaChange = (newTextAreaValue) => {
//let temp = clone.cloneDeep(newTextAreaValue);
setTextAreaValue(newTextAreaValue);
console.log(" after handleTextAreaChange",textAreaValue);// outputs: test
return;
};
textAreaValue
不会立即更新,考虑到 React 安排此类请求,这是可以理解的。
我有一个自定义按钮,它调用函数 TextFile()
并访问 textAreaValue
。但是状态值仍然设置为初始状态。
const TextFile = (value) => {
const element = document.createElement("a");
console.log(textAreaValue);// outputs test
const file = new Blob([textAreaValue],{
type: "text/html",});
element.href = URL.createObjectURL(file);
element.download = "myFile.html";
document.body.appendChild(element);
element.click();
};
我非常感谢您对此的意见!
以下是完整的代码供参考:
import React,{ useState } from "react";
import JoditEditor from "../../src/";
import clone from "lodash";
const From = () => {
let lis1 = { 0: "First Name",1: "Last Name" };
const [config,setConfig] = useState({
readonly: false,toolbar: true,extraButtons: [
{
name: "Name",icon: "fa fa-superscript",mode: 3,list: lis1,exec: function (temp,ref,e) {
if (e.control.args !== undefined) {
temp.selection.insertHTML("[" + e.control.args[1] + "]");
} else {
temp.selection.insertHTML("[" + e.control.list[1] + "]");
}
},},{
name: "Save to file",exec: function (a,b,c,d) {
TextFile();
},],});
const [textAreaValue,setTextAreaValue] = useState("Test");
const [inputValue,setInputValue] = useState("");
const [spin,setSpin] = useState(1);
const TextFile = () => {
debugger;
const element = document.createElement("a");
console.log("inside writetotext",textAreaValue);
const file = new Blob([textAreaValue],});
element.href = URL.createObjectURL(file);
element.download = "myFile.html";
document.body.appendChild(element);
element.click();
};
const toggletoolbar = () =>
setConfig((config) => ({
...config,toolbar: !config.toolbar,}));
const toggleReadOnly = () =>
setConfig((config) => ({
...config,readonly: !config.readonly,}));
const handleBlurAreaChange = (newtextAreaValue,event) => {
console.log("handleBlurAreaChange",newtextAreaValue,event);
console.log(" after handleBlurAreaChange",textAreaValue);
};
const handleTextAreaChange = (newTextAreaValue) => {
//let temp = clone.cloneDeep(newTextAreaValue);
setTextAreaValue(newTextAreaValue);
console.log(" after handleTextAreaChange",textAreaValue);
return;
};
const handleInputChange = (e) => {
const { value } = e.target;
setInputValue(() => value);
handleTextAreaChange(value);
};
const handleSpin = () => setSpin((spin) => ++spin);
return (
<div>
<JoditEditor
config={config}
onChange={handleTextAreaChange}
onBlur={handleBlurAreaChange}
value={textAreaValue}
/>
<input
onChange={handleInputChange}
placeholder={"enter some text"}
type={"text"}
value={inputValue}
/>
<button onClick={toggleReadOnly} type={"button"}>
{"Toggle Read-Only"}
</button>
<button onClick={toggletoolbar} type={"button"}>
{"Toggle Toolbar"}
</button>
<button type={"button"} onClick={handleSpin}>
{`Spin ${spin}`}
</button>
</div>
);
};
export default From;
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)