React挂钩: contentEditable未更新
React挂钩: contentEditable未更新
提问于 2020-08-19 23:57:37
function transformation(data) {
data = data + "it works";
return data;
}
export default function App() {
const [value, setValue] = useState("");
const handleChanges = (event) => {
setValue(event.currentTarget.innerHTML);
};
return (
<div
contentEditable
onChange={handleChanges}
html={transformation(value)}
/>
);
}为什么只要在div中写了一些东西，onChange就不能工作？我不能启动函数“转换”。效果很好。这似乎是contentEditable的一个问题。我要求这是用钩子来完成的。
回答 2
Stack Overflow用户
发布于 2020-08-20 00:40:08
您可以使用react-contenteditable组件，我认为它将完成您正在寻找的功能。以下代码是已实现的应用程序：
import React, { useState } from "react";
import ContentEditable from "react-contenteditable";
import "./styles.css";
function transformation(data) {
const test = `${data} It works`;
return test;
}
export default function App() {
const [value, setValue] = useState("");
const handleChanges = (event) => {
setValue(event.target.value);
};
return (
<ContentEditable
style={{ border: "2px solid black" }}
innerRef={this.contentEditable}
onChange={handleChanges}
html={transformation(value)}
/>
);
}您可以在以下方面进行尝试：https://codesandbox.io/s/awesome-breeze-6rmih?file=/src/App.js:0-549
您可以在此处阅读组件的文档：https://www.npmjs.com/package/react-contenteditable
Stack Overflow用户
发布于 2020-08-20 00:15:44
onChange属性只适用于表单字段元素，如输入、选择、文本区域等。只需将div更改为任何表单元素，就可以正常工作。:-)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63490823
复制相关文章
相似问题
腾讯云开发者
