重置使用DraftJS的非受控React组件的值可以通过以下步骤实现:
import React, { Component } from 'react';
import { Editor, EditorState } from 'draft-js';
class MyEditor extends Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty()
};
}
// 其他组件代码...
}
class MyEditor extends Component {
// 构造函数和其他代码...
render() {
return (
<div>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
/>
<button onClick={this.resetEditor}>重置</button>
</div>
);
}
// 其他组件代码...
}
class MyEditor extends Component {
// 构造函数和render方法...
onChange = (editorState) => {
this.setState({ editorState });
}
// 其他组件代码...
}
class MyEditor extends Component {
// 构造函数、render方法和onChange方法...
resetEditor = () => {
this.setState({ editorState: EditorState.createEmpty() });
}
// 其他组件代码...
}
通过以上步骤,你可以在非受控的DraftJS组件中实现重置编辑器内容的功能。当点击重置按钮时,编辑器的内容将被清空并重置为初始状态。
关于DraftJS的更多信息,你可以参考腾讯云的富文本编辑器产品WangEditor,它是基于DraftJS开发的一款富文本编辑器,适用于各种Web应用场景。
腾讯云WangEditor产品介绍链接:https://cloud.tencent.com/product/wangeditor
领取专属 10元无门槛券
手把手带您无忧上云