javascript - Draft.js 编辑器组件不可编辑
问题描述
试图学习如何在我自己的应用程序中使用 DraftJS React 组件,但我遇到了一个大问题。我已经按照此处的示例进行操作。
我曾经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;
推荐阅读
- wpf - 从内容控件访问标签元素并在数据模板中访问它
- jupyter-notebook - 如何共享 Jupyter Notebook?
- haskell - 为什么我对 signum 的定义是正确类型的?
- python - 如何在经过一定时间后自动将特定字段标记为 False 或 true?
- c# - 在 UWP 中使用 AMR-NB 编码捕获音频?
- qemu - qemu kvm vm 无法使用 ovs dpdk 访问网络
- javascript - .prop("已禁用", true); ,prop("禁用", '禁用'); 并且 .attr('disabled', 'disabled') 在 chrome 中不起作用
- excel - VBA 分组行和转换数字
- c# - 如何忽略特定属性的 FluentValidation
- html - 通过 nginx 提供站点时 CSS 不起作用