通用评论

index.js 2.1KB

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