草案js中的RichUtils.handleKeyCommand错误:this.props.editorState.is

Question

我正在使用Draft Js，在尝试使用RichUtils的handleKeyCommand时，应用程序停止，我得到错误："this.props.editorState.isInCompositionMode不是函数错误"；

有人能帮忙吗？

谢谢。

const MyEditor = () => {
const [editorState, setEditorState] = useState(()=>EditorState.createEmpty())
const editor = useRef(null)
useEffect(() => {focus()}, [])
const onChange = (editorState) => setEditorState({ editorState });
const focus = () => editor.current.focus()
const handleKeyCommand = (command, editorState) => {
const newState = RichUtils.handleKeyCommand(editorState, command)
debugger;
if (newState) {
onChange(newState);
return 'handled';
}
return 'not-handled';
}
return (
<div className="editor" onClick={focus}>
<Editor
editorState={editorState}
handleKeyCommand={handleKeyCommand}
onChange={setEditorState}
ref={editor}
placeholder="Tell your story"
spellCheck
/>
</div>
);
}
export default MyEditor

Answer 1

您混淆了类和挂钩

首先，关于方法onChange，您的代码不正确。你必须编辑它：

<Editor onChange={(editorState) => setEditorState(editorState)} /> 

handleKeyCommand()方法之二

const handleKeyCommand = (command) => {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
setEditorState(newState);
return true;
}
return false;
}

希望能帮助你！