index.jsx 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. import React, { Component } from "react";
  2. import style from "./index.less";
  3. import config from '@config/index';
  4. class Textarea extends Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. timer:null
  9. };
  10. this.$dom = React.createRef();
  11. this.handleInput = this.handleInput.bind(this);
  12. }
  13. handleInput(e){
  14. const {handleChangeAssistValue,idx,handlePush} = this.props;
  15. const text = e.target.innerText;
  16. const stimer = this.state.timer;
  17. console.log(text)
  18. handleChangeAssistValue&&handleChangeAssistValue(text,idx);
  19. //右侧推送--延时推送
  20. clearTimeout(stimer);
  21. let timer = setTimeout(function(){
  22. handlePush&&handlePush();
  23. clearTimeout(stimer);
  24. },config.delayPushTime);
  25. this.setState({
  26. timer
  27. });
  28. }
  29. shouldComponentUpdate(next){
  30. if(JSON.stringify(next) == JSON.stringify(this.props)){
  31. return false;
  32. }
  33. return true;
  34. }
  35. componentWillReceiveProps(next){
  36. const isRead = this.props.isRead;
  37. if(next.isRead != isRead){
  38. this.$dom.current.innerText = next.value||'';
  39. }
  40. }
  41. componentDidMount(){
  42. const {value} = this.props;
  43. if(value){
  44. this.$dom.current.innerText = value||'';
  45. }
  46. }
  47. render() {
  48. const {value} = this.props;
  49. return (
  50. <div className={style.divTextarea}
  51. contenteditable={true}
  52. ref={this.$dom}
  53. onInput={this.handleInput}
  54. onPropertyChange={this.handleInput}
  55. ></div>
  56. );
  57. }
  58. }
  59. export default Textarea;