问题来由:
draft-js <Editor />
组件中的onChange
和 原生组件onchange
是不同的,
原生的onchange只有在输入框文字内容变化
的时候才触发,
而 draft-js 的onChange只要光标移动
就会触发了,
然而 后续业务逻辑 并不需要考虑光标的位置变化,
我们希望像原生一样只在文字变化的情况下才触发
解决方式:
...
onChange(editorState) {
const oldState = this.state.editorState // 变更前的editorState
const newState = editorState // 变更后的editorState
const oldText = oldState.getCurrentContent().getPlainText()
const newText = newState.getCurrentContent().getPlainText()
this.setState({ editorState },()=>{
if(newText !== oldText){
// 这里就改装成了一个 原生onchange
// do something
}
})
}
还可以优化一点点,把oldText保存起来,就不用每次都两次取值,
只要取值一次就好