Question

我想在编辑的onChange中使用event.stopPropagation()。

class MyEditor extends Component {
  constructor(props) {
    super(props);

    this.onChange = (editorState) => {
      // Is there a way to get event here?
    };
  }

  render() {
    // ...
    return (
      <Editor editorState={editorState} onChange={this.onChange} />
    );
  }
}

有没有办法获得这个活动？感谢

更新：添加我的案例。我有一个编辑器，它从保存在IndexedDB中的Redux加载数据。由于选择（游标）将在convertToRaw和convertFromRaw之后丢失，因此我使用localEditorState来维护游标。

编辑器有一个包装器。如果用户单击编辑器包装器，我想将光标移动到结束。如果用户单击里面的编辑器，我希望光标使用localEditorState中的选择信息。

class Send extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      localEditorState: EditorState.createEmpty(),
      shouldMoveCursorToEnd: false
    };

    // ...
  }

  componentDidMount() {
    const { loadEditor } = this.props;
    loadEditorFromIndexedDB();
  }

  onEditorWrapperClick() {
    const { editorState } = this.props;

    this.domEditor.focus();
    this.setState({ shouldMoveCursorToEnd: true });
  }

  onEditorChange(newEditorState) {
    // Without event.stopPropagation(), onEditorWrapperClick will also run, which is not what I want

    this.setState({ shouldMoveCursorToEnd: false });
    this.updateEditorText(newEditorState);
  }

  updateEditorText(newEditorState) {
    const { updateEditor } = this.props;

    this.setState({ localEditorState: newEditorState });

    updateEditor(newEditorState);
    this.saveToIndexedDB({ newEditorState });
  }

  render() {
    const { editorState } = this.props;
    const { localEditorState, shouldMoveCursorToEnd } = this.state;

    const editorStateWithSelection = shouldMoveCursorToEnd
      ? EditorState.moveFocusToEnd(editorState)
      : EditorState.acceptSelection(editorState, localEditorState.getSelection());

    return (
        <form onClick={this.onEditorWrapperClick}>
          <Editor editorState={editorStateWithSelection} onChange={this.onEditorChange} />
          <button type="submit">Send</button>
        </form>
    );
  }
}

export default Send;

Answer 1

我觉得您正在寻找的解决方案将涉及将onMouseDown()组件的<Editor/>综合事件操纵到preventDefault() / stopPropagation()并相应地执行自定义逻辑。

点击<Wrapper/>组件内的任何其他位置都应设置编辑器状态，以将插入符号放在编辑器的末尾。

您的结果可能与以下内容类似：

// Component.
<form onMouseDown={this.handleWrapperClick}>
  <Editor .. onMouseDown={this.handleEditorClick}/>
</form>


// Logic.
handleWrapperClick = (event) => {

  // Manipulate editorState to focus / place caret at end of <Editor/>.
}
handleEditorClick = (event) => {

  // Intercept / Cancel Click Event.
  event.preventDefault()
  event.stopPropagation()

  // Set editorState to match selection info from localEditorState.
}

Answer 2

传递给onChange方法的默认参数是事件对象。如果我理解你的意图，我会修改代码如下：

class MyEditor extends Component {
  constructor(props) {
    super(props);
  }

  onChange = (event, editorState) => {
    // event passed from Editor component
  };

  render() {
    // ...
    return (
      <Editor editorState={editorState} onChange={event => this.onChange(event, editorState)} />
    );
  }
}

如何在Draft.js中的编辑器的onChange中获取事件？

2 个答案: