如何解决React-Quill-addRange:给定范围不在文档中
我正在尝试使用React-Quill文本编辑器创建一个简单的博客。我想获取ReactQuill编辑器的值并在其他 route 上预览。我已经尝试了很长时间了,每次遇到相同的问题时,每次按下键后,主轴编辑器都会失去焦点,并在控制台中发出警告,提示 addRange():给定的范围是不在文档中。
我观察到一件事。当我仅将道具传递给
App.js:
class App extends Component {
constructor(){
super()
this.state = {
title: '',text: ''
}
this.handleBlogTextChange = this.handleBlogTextChange.bind(this)
this.handleBlogTitleChange = this.handleBlogTitleChange.bind(this)
}
handleBlogTextChange(value){
this.setState({
text: value
})
console.log(this.state.text)
}
handleBlogTitleChange(value){
this.setState({
title: value
})
console.log(this.state.title)
}
render(){
return (
<BrowserRouter>
<div class="App">
<Switch>
<Route path='/createBlog' component={() => <CreateBlog text={this.state.text} handleBlogChange={this.handleBlogTextChange} /> } />
<Route exact path='/preview' component={() => <PreviewBlog title={this.state.title} text={this.state.text} />} />
<Redirect to='/createBlog' />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
CreateBlog.js:
export default class CreateBlog extends Component {
render() {
return (
<>
----------
<TextEditor text={this.props.text} handleBlogChange={this.props.handleBlogChange} />
----------
</>
)
}
}
TextEditor.js:
class TextEditor extends Component {
componentDidMount(){
const input = document.querySelector('input[data-link]')
input.dataset.link = 'https://google.co.in'
}
modules={
toolbar: [
[{ 'header': '1'},{'header': '2'},{ 'font': [] }],[{size: []}],['bold','italic','underline','blockquote','code-block'],[{'list': 'ordered'},{'list': 'bullet'},{'indent': '-1'},{'indent': '+1'},{'align': []}],['link','image','video'],['clean']
],}
render() {
return (
<div className="editor">
<ReactQuill theme="snow" placeholder="Enter story..." modules={this.modules} value={this.props.text} onChange={this.props.handleBlogChange} />
</div>
);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。