contentitable属性的React - onChange事件

Question

我想使用<div onInput={onChange} contentEditable>来保存用户输入，就像textarea一样。我听说我需要使用onInput监听器来触发fn当输入改变。问题是当我用React状态更新文本时，它会不断地将插入符号移动到文本的开头

这是我的代码

import React from "react";
const App = () => {
const [value, setValue] = React.useState("I am edittable");
const onChange = (e) => {
const html = e.target.innerHTML;
setValue(html);
};
return (
<div onInput={onChange} contentEditable>
{value}
</div>
);
};
export default App;

codesandboxhttps://codesandbox.io/s/react-editable-cell-pwil6?file=/src/App.js: 0 - 310

我该如何修复它?

Answer 1

这有一个解决方案，但onChange不注册事件。它不会改变状态。不要使用它!我的建议是使用onInput，但不要使用状态变量作为innerHTML的可编辑元素。

设置一些默认值，contentitable将处理innerHTML的变化，而onInput将处理innerHTML值的状态变化。

如果你想确保innerHTML不会是空的，你可以添加onBlur事件，检查它是否=="并将其更新为默认值或其他值，等等。

Answer 2

这是一个古老的问题，但我刚刚为自己解决了这个问题，我想我应该分享一下。

onChange永远不会触发，而onInput也不是最好的方法。你需要用onFocus和onBlur来模拟onChange。

当onFocus发生时，将innerHTML的值复制到一个变量。

当onBlur发生时，测试innerHTML对变量，看看它是否改变。如果是这样，做你的onChange的东西。你需要这样做:

const onFocus = (e) => {
val_start = e.target.innerHTML;
};
const onBlur = (e) => {
if(val_start !== e.target.innerHTML) {
//Whatever you put here will act just like an onChange event
const html = e.target.innerHTML;
setValue(html);
}
};

Answer 3

contentEditable将使div中的内容可编辑。

你可以用onBlur代替onInput，这样闪烁的光标就不会一直移动到文本的开始。

无论你对文本做了什么改变，都会在屏幕上显示出来，一旦你把焦点移出元素，状态就会更新。

<div onBlur={onChange} contentEditable>
{value}
</div>

Answer 4

这就是你需要的:

<div onChange={onChange}  contentEditable>

应该是onChange而不是onInput

演示:https://codesandbox.io/s/react-editable-cell-forked-ey7o1?file=/src/App.js