Question

我想像 textarea 一样使用 <div onInput={onChange} contentEditable> 来保存用户输入。我听说我需要使用 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;

代码沙盒 https://codesandbox.io/s/react-editable-cell-pwil6?file=/src/App.js:0-310

我该如何解决？

Answer 1

这有一个解决方案，但 onChange 不注册该事件。它不会改变状态。不要使用它！

我的建议是使用 onInput，但不要使用 state 变量作为可编辑元素的 innerHTML。

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

如果您想确保 innerHTML 不会为空，您可以添加 onBlur 事件，检查它是否为 ==="" 并使用默认值或其他内容更新它。

Answer 2

这是你需要的：

<div onChange={onChange}  contentEditable>

应该是onInput而不是onChange

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

React - contentEditable 属性的 onChange 事件

2 个答案: