通用评论

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import React, { Component } from "react";
  2. import ReactDOM from "react-dom";
  3. // e.g.
  4. // import { Button, Icon } from "antd";
  5. import App, { Editor, RenderText } from "./App";
  6. import registerServiceWorker from "./registerServiceWorker";
  7. class Index extends Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = {
  11. value: ""
  12. };
  13. this.handleChangeValue = this.handleChangeValue.bind(this);
  14. this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
  15. }
  16. handleChangeValue(value) {
  17. this.setState({ value });
  18. console.log("handleChangeValue value: ", value);
  19. }
  20. handleChangeSubmit({ text, files }) {
  21. this.setState({ loading: true }, () => {
  22. setTimeout(() => {
  23. this.setState({ loading: false });
  24. }, 2000);
  25. });
  26. console.log("submit text: ", text);
  27. console.log("submit files: ", files);
  28. }
  29. render() {
  30. // 最简单的用法
  31. return (
  32. <App type={1} businessId="test">
  33. <Editor />
  34. </App>
  35. );
  36. // e.g.
  37. // 复杂的用户法
  38. // const props = {
  39. // type: 1,
  40. // businessId: "1",
  41. // API: "http://api.links123.net/comment/v1",
  42. // showList: true
  43. // };
  44. // const editorProps = {
  45. // showEmoji: true,
  46. // placeholder: "说点什么吧",
  47. // rows: 5,
  48. // btnLoading: this.state.loading,
  49. // btnDisable: this.state.loading,
  50. // btnSubmitText: "提交",
  51. // value: this.state.value,
  52. // onChange: v => this.handleChangeValue(v),
  53. // onSubmit: v => this.handleChangeSubmit(v),
  54. // button: (
  55. // <Button
  56. // type="primary"
  57. // ghost
  58. // // onClick={() => console.log('click btn: ', this.state.value)}
  59. // >
  60. // 自定义按钮
  61. // </Button>
  62. // ),
  63. // emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
  64. // imageToolIcon: (
  65. // <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
  66. // )
  67. // };
  68. // return (
  69. // <App {...props}>
  70. // <Editor {...editorProps} />
  71. // </App>
  72. // );
  73. }
  74. }
  75. ReactDOM.render(<Index />, document.getElementById("root-comment"));
  76. registerServiceWorker();