gpt4 book ai didi

javascript - Draft.js 编辑器组件不可编辑

转载 作者:行者123 更新时间:2023-11-29 20:49:34 26 4
gpt4 key购买 nike

试图学习如何在我自己的应用程序中使用 DraftJS React 组件,但我遇到了一个大问题。我已经按照位于 here. 的示例进行操作

我使用 create-react-app 获取基础样板文件,我导入了编辑器和状态对象,并像示例一样实现。

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;

关于javascript - Draft.js 编辑器组件不可编辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52596577/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com