javascript - react 内容可编辑和光标位置

Question

我有简单的组件

class ContentEditable extends React.Component {
  constructor(props) {
    super(props);
    this.handleInput = this.handleInput.bind(this);
  }

  handleInput(event) {
    let html = event.target.innerHTML;
    if (this.props.onChange && html !== this.lastHtml) {
      this.props.onChange({ target: { value: html, name: this.props.name } });
      this.lastHtml = html;
    }
  }

  render() {
    return (
      <span
        contentEditable="true"
        onInput={this.handleInput}
        className={"auto " + this.props.className}
        dangerouslySetInnerHTML={{ __html: this.props.value }}
      />
    );
  }
}
export default ContentEditable;

<ContentEditable
  value={this.state.name}
  onChange={e => {
    this.setState({ name: e.target.value });
  }}
/>;

该组件工作，但光标位置永远不会改变，它总是在第一个位置，而不是在渲染文本之后。
我测试了这个论坛的例子，但它对我不起作用。
我用 React 15.6.1并在 chrome (Os X) 上进行测试.
任何提示我如何解决这个问题？

Answer 1

useRef 的解决方案如下所示。

这里的 useRef 将保持默认值/初始值与组件渲染周期分开，因此它将保留原始值而不受我们在 react 组件中执行的其他类型的操作的影响。
这个组件做了两件事

这将使用 onChange 方法将用户输入发送到父组件

从父组件获取一个名为 prop 的默认值作为 value 并在自定义输入框中呈现该值(使用 contentEditable 创建)

我添加了一个代码沙箱，链接 here ，用它来看看它是如何工作的!

The code sandbox example contains two components

• one is ContentEditableWithRef which solves the problem with useRef , which is an uncontrolled component and
• the other component is ContentEditable which uses useState to solve the same problem.