试图学习如何在自己的应用程序中使用DraftJS React组件,这是一个大问题。我遵循了位于here.的示例
我使用create-react-app
来获取基本样板,并且导入了Editor和state对象,并像示例一样实现。
import React, { Component } from 'react';
import {Editor, EditorState} from 'draft-js';
class App extends Component {
constructor(props){
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<div className='container'>
<h2> Welcome to the editor</h2>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
placeholder='Make Something Great.' />
</div>
);
}
}
export default App;
问题是它正在显示H1,并使用占位符文本显示编辑器,但根本不允许我更改编辑器的内容。
我敢肯定我会丢失一些东西。我需要做什么才能启用编辑功能?
更新:事实证明它实际上是可编辑的,我只需要单击占位符下方的即可。奇怪,但是还可以。
最佳答案
发生这种情况是因为不包括Draft.css。
最终组件应如下所示:
import React, { Component } from 'react';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';
class App extends Component {
constructor(props){
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<div className='container'>
<h2> Welcome to the editor</h2>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
placeholder='Make Something Great.' />
</div>
);
}
}
export default App;