通用评论

index.js 2.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  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 App, { Editor } from "./App";
  7. import registerServiceWorker from "./registerServiceWorker";
  8. class Index extends Component {
  9. constructor(props) {
  10. super(props);
  11. this.state = {
  12. value: ""
  13. };
  14. this.handleChangeValue = this.handleChangeValue.bind(this);
  15. this.handleChangeSubmit = this.handleChangeSubmit.bind(this);
  16. }
  17. handleChangeValue(value) {
  18. this.setState({ value });
  19. console.log("handleChangeValue value: ", value);
  20. }
  21. handleChangeSubmit({ text, files }) {
  22. this.setState({ loading: true }, () => {
  23. setTimeout(() => {
  24. this.setState({ loading: false });
  25. }, 2000);
  26. });
  27. console.log("submit text: ", text);
  28. console.log("submit files: ", files);
  29. }
  30. render() {
  31. // 最简单的用法
  32. return (
  33. <App
  34. type={1}
  35. businessId="test"
  36. showAlertComment
  37. showAlertReply
  38. showAlertFavor
  39. showError={false}
  40. onError={msg => {
  41. console.log(`-----------${msg}`);
  42. }}
  43. >
  44. <Editor
  45. maxUpload={4}
  46. beforeSubmit={() => {
  47. return new Promise(resolve => {
  48. resolve(true);
  49. });
  50. }}
  51. showError={false}
  52. onError={msg => {
  53. console.log(`-----------${msg}`);
  54. }}
  55. />
  56. </App>
  57. );
  58. // e.g.
  59. // 复杂的用户法
  60. // const props = {
  61. // type: 1,
  62. // businessId: "1",
  63. // API: "http://api.links123.net/comment/v1",
  64. // showList: true
  65. // };
  66. // const editorProps = {
  67. // showEmoji: true,
  68. // placeholder: "说点什么吧",
  69. // rows: 5,
  70. // btnLoading: this.state.loading,
  71. // btnDisable: this.state.loading,
  72. // btnSubmitText: "提交",
  73. // value: this.state.value,
  74. // onChange: v => this.handleChangeValue(v),
  75. // onSubmit: v => this.handleChangeSubmit(v),
  76. // button: (
  77. // <Button
  78. // type="primary"
  79. // ghost
  80. // // onClick={() => console.log('click btn: ', this.state.value)}
  81. // >
  82. // 自定义按钮
  83. // </Button>
  84. // ),
  85. // emojiToolIcon: <Icon type="smile" style={{ fontSize: 23 }} />,
  86. // imageToolIcon: (
  87. // <Icon type="cloud-upload-o" style={{ fontSize: 25, marginLeft: 10 }} />
  88. // )
  89. // };
  90. // return (
  91. // <App {...props}>
  92. // <Editor {...editorProps} />
  93. // </App>
  94. // );
  95. }
  96. }
  97. ReactDOM.render(<Index />, document.getElementById("root-comment"));
  98. registerServiceWorker();