通过this.state.is_reply值判断是否加载组件,子组件编辑器用的simplemde
{this.state.is_reply && this.renderEidtor()}
<Fragment>
<Editor getContent={this.setContent} onRef={this.onRef} />
<Flex justify="end">
<Button
style={{ marginRight: "10px" }}
type="ghost"
inline
size="small"
onClick={this.handleClick}
>
发布
</Button>
</Flex>
</Fragment>
import React, { PureComponent, Fragment } from "react";
import SimpleMDE from "simplemde";
import "simplemde/dist/simplemde.min.css";
class Edtior extends PureComponent {
componentDidMount() {
this.props.onRef(this)
this.simplemde = new SimpleMDE({
element: document.getElementById("editor"),
placeholder: "Type here..."
});
this.simplemde.codemirror.on("change", ()=>{
// console.log(this.simplemde.value());
let content = this.simplemde.value();
this.props.getContent(content);
});
}
clearEditor = () => {
this.simplemde.value('')
}
render() {
return (
<Fragment>
<textarea id="editor" />
</Fragment>
);
}
}
export default Edtior;