Редакторы Draft-js, вызывающие обратный вход

Question

У меня есть приложение, которое требует нескольких текстовых входов, а для форматирования и настройки я выбрал draft-js в качестве моего редактора, однако я столкнулся с очень запутанной проблемой ввода.

Когда я печатаю в редакторах, моя последняя нажатая клавиша печатается в начале редактора, меняя весь мой вход, как будто карет всегда находится в первом указателе строки.

У меня есть 3 редактора, каждый из которых имеет onChange, который обновляет хранилище redux с действующими редакторами contentState. Когда страница повторно отображается, каждый редактор затем отображается с их соответствующими 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

Я не могу видеть по коду, который вы предоставили, но похоже, что ваша проблема заключается в том, что вы воссоздаете EditorState (используя EditorState.createEmpty() или EditorState.createWithContetnt()) при каждом изменении. Это не будет работать, так как это только восстановление содержимого - не положение курсора, выбор и т.д.

Путь я решил это, то, что я создаю EditorState только раз, т.е. если она Безразлично» t уже существуют. Затем при каждом изменении я обновляю EditorState обычно и, в то же время сохраняю contentState, в нашем случае, в базе данных. Важно то, что вы не используете contentState для создания нового EditorState.

Так что в следующий раз EditorState не существует, он инициализируется с использованием EditorState.createWithContent(contentStateFromDB).

Answer 2

Я только что ударил (и разрешил) аналогичную проблему.

Если у вас такая же проблема, как у меня, это связано с тем, что вызов setState фактически приостанавливает обновление состояния, и он не применяется до вызова this.props.onChange. По-видимому, это похоже на то, чтобы выбросить draft.js.

изменение Try:

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

к:

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

Это гарантирует, что состояние обновляется перед вызовом родительского onChange обратного вызова.