我使用的是draft.js编辑器,因此我需要更新装饰器以及它在onChange
内动态呈现的组件的props。用背景色标记文本的一部分。
我几乎可以使它正常工作,但是有一个奇怪的错误,在该错误中,除其他因素外,无法在其中一个装饰组件之后立即选择角色。
以下是重现该错误的最小(人工)示例:
import React from 'react';
import { CompositeDecorator, Editor, EditorState } from 'draft-js';
const Marked = ({ children, background }) => <span style={{ background }}>{children}</span>;
class TestEditor extends React.Component {
constructor(props) {
super(props);
this.state = { editorState: EditorState.createEmpty() };
this.handleChange = this.handleChange.bind(this);
}
handleChange(editorState) {
const markers = [{ from: 3, to: 7 }, { from: 12, to: 15 }];
const strategy = (contentBlock, callback) => {
const text = contentBlock.getText();
markers.forEach(({ from, to }) => {
if (text.length >= to) callback(from, to);
});
};
const decorator = new CompositeDecorator([
{ strategy, component: (props) => <Marked {...props} background="#00ff2a1a" /> },
]);
const newEditorState = EditorState.set(editorState, { decorator });
this.setState({ editorState: newEditorState });
}
render() {
const { editorState } = this.state;
return <Editor editorState={editorState} onChange={this.handleChange} />;
}
}
export default TestEditor;
这将是一个文本输入,其中位置3-7和12-15的文本具有绿色背景(如果存在)。
例如,如果我现在写aaabbbbccc
,则不可能选择第一个c
。使用鼠标将其选中,直到我释放鼠标按钮;使用键盘似乎根本没有被选择(可能只是暂时的)。
如果我在handleChange
方法中使用没有新输入的静态组件,则可以正常使用:const decorator = new CompositeDecorator([{ strategy, component: Marked }]);
。但是,这不适合我的用例。
有什么建议吗?
答案 0 :(得分:0)
最后,事实证明,我可以用草稿的conda
做我想做的事,可能会有更好的表现