我在 React 应用程序中使用 react-quill 作为富文本编辑器。
我必须将文本编辑器的内容存储在本地 React 状态中,并且只将值发送到 Redux 'onBlur'。我的问题是当您获得焦点后单击文本编辑器外部的按钮时,onBlur 将不起作用。 (即,onBlur 在点击屏幕上的非交互元素时有效,但在点击“保存”按钮时无效)。
当前代码:
class TextEditor extends React.Component {
constructor(props) {
super(props)
this.state={
content: this.props.content;
}
this.handleQuillEditor_change = this.handleQuillEditor_change.bind(this)
this.handleQuillEditor_update = this.handleQuillEditor_update.bind(this)
}
handleQuillEditor_change (value) {
// handleChange...
}
handleQuillEditor_update () {
console.log('blur activated!')
}
render() {
const cmsProps = this.props.cmsProps
return (
<div style={containerStyle}>
<ReactQuill value={this.state.content}
onChange={this.handleQuillEditor_change}
onBlur={this.handleQuillEditor_update}/>
</div>
)
}
}
最佳答案
我的快速修复:将模糊处理程序移动到 QuillComponent 的容器 div,如下所示:
<div style={containerStyle} onBlur={this.handleQuillEditor_update}>
<ReactQuill value={this.state.content}
onChange={this.handleQuillEditor_change} />
</div>
关于javascript - react 羽毛笔 onBlur 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47018722/