Javascript 导致反向输入的草稿js编辑器

我有一个需要多个文本输入的应用程序，对于格式和自定义，我选择了

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)}
        />
        ...
    )
}

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)}
            />
        )
    }
}

render（）{
/*每个编辑器都有一个类似的块，如下所示*/
让coverEditorState=EditorState.createEmpty（）
let coverContentState=\ u0.get（数据'details.message.cover.contentState'）
if（coverContentHTML的类型！=“未定义”）{
coverEditorState=EditorState.createWithContent（coverContentState）
}
返回(
...
...
)
}

Composer.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)}
        />
        ...
    )
}

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)}
            />
        )
    }
}

类生成器扩展组件{
构造函数（）{
超级（）
this.state={editorState:editorState.createEmpty（），styleMap:{}
}
组件将接收道具（下一步）{
this.setState（{editorState:nextrops.editorState}）
}
onChange（编辑状态）{
让nextState=Object.assign（{}，this.state，{editorState}）
让currentContentState=editorState.getCurrentContent（）
让changeObject={
contentState:currentContentState
}
this.setState（nextState）
this.props.onChange（changeObject）
}
render（）{
返回(
)
}
}

---

我尝试返回

选择状态

以及

内容状态

，将二者结合起来，然后重新渲染，但这只会导致更多的问题和错误。

我无法从您提供的代码中真正看到，但听起来您的问题在于您正在重新创建EditorState（使用

EditorState.createEmpty（）

或

编辑器state.createWithContentnt（）

）进行更改。这是行不通的，因为它只是恢复内容，而不是光标位置、选择等

我解决这个问题的方法是，我只创建一次

编辑器状态

，，即如果它不存在的话。然后，在每次更改时，我通常更新

EditorState

，，同时将

contentState

保存到数据库中。这里重要的一点是，不要使用

contentState

创建新的

EditorState

因此，下次当

编辑器状态不存在时，它将使用
EditorState.createWithContent（contentStateFromDB）
进行初始化。我刚刚遇到（并解决了）一个类似的问题

如果你和我有同样的问题，那是因为对
setState
的调用实际上是对状态的更新排队，并且在调用
this.props.onChange
之前没有应用它。这似乎使
draft.js
失去了正常状态，这是可以理解的

尝试更改：

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

致：

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