如何在原子块内的文本输入中输入文本

Question

我有一个以下列方式呈现的原子块：

const blockRendererFn = (block) => {
    if (block.getType() === 'atomic') {
      return {
        component: (props) => (
          <AtomicBlockRenderer {...{
            ...props,
            getEditorState: () => editorState,
            setEditorState: (editorState) => dispatchSetEditorState(editorState),
            editorEl
          }}/>
        ),
        editable: true
      }; 
    }

    return null;
  };

const AtomicBlockRenderer = (props) => {
  const { contentState, block } = props;
  const entity = contentState.getEntity(block.getEntityAt(0));
  const type = entity.getType();

  switch (type) { 
    case 'video': return <VideoInput {...{...props, entity}} />;
    default: return null;
  }
};


import React, { useRef } from 'react';

export const VideoInput = (props) => {
  const inputEl = useRef(null);

  return (
    <div
      className="video-input"
    >
      <input
        ref={inputEl}
        type="text"
        className="form-control"
        placeholder="paste youtube or vimeo url"
      />
    </div>
  );  
};

我无法专注于input内部的VideoInput元素。即使我以某种方式使用ref聚焦，编辑器也会由于我的内容状态格式错误而崩溃。如何设置输入元素以接收来自用户的URL？

沙盒：https://codesandbox.io/s/lucid-hypatia-61g3x

Answer 1

当用户尝试与输入字段进行交互时，您需要将编辑器切换为只读模式。您可以通过将onFocus处理程序添加到将编辑器设置为只读的输入字段来实现。

为了证明这是您所需要的，请尝试以下步骤：*添加视频元素*打开React调试器并将readOnly组件上的true标志翻转到DraftEditor*尝试在输入字段中输入内容

请参见https://draftjs.org/docs/api-reference-editor#readonly以获取更多参考。