当草稿编辑器处于只读模式时不会触发 onChange答案

【问题标题】：onChange not triggering when the draft editor is in readOnly mode当草稿编辑器处于只读模式时不会触发 onChange
【发布时间】：2020-02-29 09:57:09
【问题描述】：

当草稿编辑器处于只读模式时不会触发 onChange 事件。我想保持只读模式，但它必须触发 onChange 事件，这样我才能保存我的工作。

             <Editor
                readOnly={true}
                onChange={this.onChange}
                ref={(e) => { this.editor = e; }}
                autoCapitalize="none"
                autoComplete="off"
                autoCorrect="off"
                spellCheck={false}
              />

【问题讨论】：

当readOnly 关闭时，您可以只使用onChange，“all editability disabled” => ref
谢谢。我这样做是为了草稿 js 可访问性。我知道当 readOnly 开启时可编辑性被禁用。我有办法让它可编辑。现在我需要一个解决方案来保存工作。

标签： javascript html node.js reactjs draftjs

【解决方案1】：

如下所述，您可以在编辑器更改或模糊事件上触发保存操作（但为了性能，我建议使用模糊）：

const [editorState, setEditorState] = useState();
const [editable, setEditable]=useState(false);
const editorRef = useRef(null);

const onChange = (editorState) => {
  setEditorState(editorState);
};

const onBlur = (state) => {
   //  convertToRaw from draft-js;
  const contentState = convertToRaw(editorState.getCurrentContent());
  // save contentState      
};

return (
  <Editor
    editorState={editorState}
    readOnly={!editable}
    onChange={onChange}
    onBlur={onBlur}
    ref={editorRef}
    autoCapitalize="none"
    autoComplete="off"
    autoCorrect="off"
    spellCheck={false}
  />
)

【讨论】：