自定义原子块

Question

使用Draft-js，我通过实体将原子块插入编辑器：

const contentState = editorState.getCurrentContent();
const contentStateWithEntity = contentState.createEntity(
      'IMAGE',
      'IMMUTABLE',
      {src: 'https://some.image.png' }
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const newEditorState = EditorState.set(
  editorState,
  {currentContent: contentStateWithEntity}
);

// causes re-render with editorState
this.onChange(
    AtomicBlockUtils.insertAtomicBlock(
      newEditorState,
      entityKey,
      ' '
    )
);

使用blockRendererFn，我使用实体数据渲染自定义组件以在div中渲染图像：

render() {
  return (
    <div><img src={src} /></div>
  );
}

我希望能够为图像（实体）添加标题。我尝试将一个输入框连接到我的组件中的状态，这将合并实体数据，但是如果触发任何类型的输入框文本，它似乎只是删除实体。

render() {
  return (
    <div>
       <img src={src} />
       <input placeholder="Caption" onChange={this.updateCaption} />
    </div>
  );
}

有人知道如何在自定义块中设置自定义输入区域吗？