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

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>
  );  
};

我无法专注于 VideoInput 中的 input 元素。即使我使用 ref 以某种方式连接焦点，编辑器也会因为我的内容状态变得畸形而崩溃。如何设置输入元素以接收来自用户的 URL？

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

Answer 1

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

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

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

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

How to enter text in a text-input inside an atomic block

reactjs

draftjs