我正在为 Draft.js 使用 react-draft-wysiwyg 包装器。在页面上，我有多个 Editor 组件实例。onChange我对编辑器 UI（事件处理程序）的缓慢/滞后更新有问题。也许这是一些提示，我在控制台中收到了很多警告[Violation] 'input' handler took <N>msA。
我的设置是：
- 反应样板
- 反应草稿所见即所得
- 还原
- 还原传奇
- 重新选择
我正在调度操作来处理编辑器状态更改，它由 redux-saga 处理。Saga 将检查是否有新内容并更新商店。
export function* handleOnEditorStateChange({ editorState, nameSpace }) {
const actualEditorState = yield select(selectAllEditorsContent());
const editorIndexToUpdate = actualEditorState.findIndex(
editors => editors.name === nameSpace,
);
const currentContent = actualEditorState[
editorIndexToUpdate
].state.getCurrentContent();
const newContent = editorState.getCurrentContent();
const hasEditorNewContent = newContent !== currentContent;
if (hasEditorNewContent) {
const updatedEditorState = [...actualEditorState];
updatedEditorState[editorIndexToUpdate].state = editorState;
yield put(storeEditorStateAction(updatedEditorState));
}
}
我的 redux 状态如下所示：
...
editors: [
{
name: 'editor1',
label: 'Editor 1',
state: {... _immutable - draftjs }
},
{
name: 'editor2',
label: 'Editor 2',
state: {... _immutable - draftjs }
},
]
...
减速器：
...
case STORE_EDITOR_STATE: {
const { content } = action;
return state.set('editors', content);
}
...