Question

我有一个由Draft.js提供的编辑器的包装器，我想让tab / shift-tab键像UL和OL一样工作。我定义了以下方法：

  _onChange(editorState) {
    this.setState({editorState});
    if (this.props.onChange) {
      this.props.onChange(
        new CustomEvent('chimpeditor_update',
          {
            detail: stateToHTML(editorState.getCurrentContent())
          })
      );
    }
  }

  _onTab(event) {
    console.log('onTab');
    this._onChange(RichUtils.onTab(event, this.state.editorState, 6));
  }

我在这里有一个方法_onTab，它连接到Editor.onTab，我调用RichUtil.onTab()，我假设它返回更新的EditorState，然后我传递给更新EditorState并调用一些回调的泛型方法。但是，当我点击tab或shift-tab时，根本没有任何事情发生。

Answer 1

因此这是在使用React Hooks实施时出现的，并且Google搜索将此答案列为＃2结果。

我相信OP的代码是正确的，而且我也看到“什么也没有发生”。原来，该问题不包括Draft.css样式。

def main(): dbRow = GetAPersonRowFromDB() personFromRow = CreateObjectFromDatabase(Person, dbRow, "name", "gender") def transform(value): transformedValue = #do something to the value return transformedValue def CreateObjectFromDatabase(className, *args): transformedArgs = [] # apply transform() to each *args item for arg in args: transformedArgs.append(transform(dbRow[arg])) obj = className(transformedArgs) return obj class Person: def __init__(self, name, gender): self.Name = name self.Gender = gender def __init__(self, *args): self.Name = args[0] self.Gender = args[1]

Answer 2

import { Editor, RichUtils, getDefaultKeyBinding } from 'draft-js'


handleEditorChange = editorState => this.setState({ editorState })

handleKeyBindings = e => {
  const { editorState } = this.state
  if (e.keyCode === 9) {
    const newEditorState = RichUtils.onTab(e, editorState, 6 /* maxDepth */)
    if (newEditorState !== editorState) {
       this.handleEditorChange(newEditorState)
    }

    return
  }

  return getDefaultKeyBinding(e)
}

render() {
  return <Editor onTab={this.handleKeyBindings} />
}

处理Draft.js中列表的选项卡

2 个答案: