Question

我的应用程序需要多个文本输入，而且为了格式化和自定义，我选择draft-js作为我的编辑器，但是我遇到了一个非常令人困惑的输入问题

当我输入编辑器时，我最近按下的键被打印在编辑器的开头，反转了我的整个输入，好像插入符始终位于该行的第一个索引处。

我有3个编辑器，每个都有一个onChange，用编辑器当前contentState更新redux商店。重新呈现页面时，会渲染每个编辑器，并将各自的contentState转换为EditorState。

这是我的代码：

main.js

render() {

    /* Each Editor has a similar block as below */

    let coverEditorState = EditorState.createEmpty()
    let coverContentState = _.get(data, 'details.message.cover.contentState')

    if (typeof coverContentHTML != "undefined"){
        coverEditorState = EditorState.createWithContent(coverContentState)
    }

    return (
        ...
        <Composer
            editorState={coverEditorState}
            onChange={this._handleCoveringLetterChange.bind(this)}
        />
        ...
    )
}

Composer.js

class Composer extends Component {
    constructor() {
        super()
        this.state = { editorState: EditorState.createEmpty(), styleMap: {} }
    }

    componentWillReceiveProps( nextProps ) {
        this.setState({ editorState: nextProps.editorState })
    }

    onChange( editorState ) {

        let nextState = Object.assign({}, this.state, { editorState })

        let currentContentState = editorState.getCurrentContent()

        let changeObject = {
            contentState: currentContentState
        }

        this.setState(nextState)
        this.props.onChange(changeObject)
    }

    render() {
        return (
            <Editor 
                editorState={this.state.editorState}
                onChange={this.onChange.bind(this)}
            />
        )
    }
}

我尝试返回SelectionState以及ContentState，将两者结合起来并重新渲染，但这只会导致更多问题和错误。

Answer 1

我刚刚遇到（并解决了）类似的问题。

如果您遇到与我相同的问题，那是因为对setState的调用实际上是对状态进行了更新，并且在调用this.props.onChange之前没有应用。这可以理解似乎让draft.js失控。

尝试更改：

this.setState(nextState)
this.props.onChange(changeObject)

为：

this.setState(nextState, () => { 
    this.props.onChange(changeObject); 
});

这将确保在调用父onChange回调之前更新状态。

Answer 2

我无法通过您提供的代码看到，但听起来您的问题是您在每次更改时都在重新创建EditorState（使用EditorState.createEmpty()或EditorState.createWithContetnt()）。这不起作用，因为它只是恢复内容 - 而不是光标位置，选择等。

我解决它的方法是，我只创建EditorState 一次，即它是否已经存在。然后，在每次更改时，我都会更新EditorState通常和，同时将contentState保存到我们的数据库中。 重要的是，您不要使用contentState创建新的EditorState。

因此，下次EditorState不存在时，会使用EditorState.createWithContent(contentStateFromDB)对其进行初始化。

Draft-js编辑导致反向输入

2 个答案: