Javascript 如何在ReactJS中获取contentEditable输入的初始值和设置状态值？

我正在尝试使用contentEditable div和 以下问题：

无法获取文本属性的初始值

无法从contentEditable获取setState值

使用输入元素时，表情符号工作正常，但与contentEditable不兼容

使用下面提供的代码，当console.log， 不知道我错过了什么

预期结果

从contentEditable（包括表情符号）获取键入的值

//内容输入模型
从“React”导入React，{Fragment}
导入“../assets/css/comment.css”
const ContentInput=（{valueChange，contentInputId，ref，onClick，onPhClick，占位符，…props}）=>{
返回(
)
};
导出默认内容输入

//注释模式///
从“React”导入React，{Component}；
从“表情选择器”导入表情选择器
导入“../../../../assets/css/comment.css”
从“表情符号js”导入JSEMOJI
从“../../../../UIElements/Inputs/ContentInput”导入ContentInput；
//表情符号设置
让jsemoji=newjsemoji（）；
//将样式设置为emojione（默认-apple）
jsemoji.img_set='emojione'；
//设置所有表情符号的存储位置
jsemoji.img_sets.emojione.path=https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';
类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文本：“”，
表情秀：错，
};
this.desChange=this.desChange.bind（this）；
}
更改=（e）=>{
//让text=this.state.text；
this.setState（{text:e.target.value}）；
};
评论=（e）=>{
e、 预防默认值（）；
设{text}=this.state；
让{back，incrementComments，…rest}=this.props；
const updateText=this.setState（{text:e.target.value}）；
console.log（updateText）；
};
//在输入窗口内显示表情符号
handleEmojiClick=（n，e）=>{
让emoji=jsemoji.replace_冒号（`:${e.name}:`）；
这是我的国家({
文本：e.target.value+emoji，
emojiShown:！this.state.emojiShown
});
console.log（this.emojiShown）
};
ToggleMojiState=（）=>{
这是我的国家({
emojiShown:！this.state.emojiShown
});
};
render（）{
返回(
);
}
}
导出默认模式；
```

在

ContentInput

上使用

onInput

而不是

onChange

并在

desChange

上使用

e.target.innerHTML

而不是

e.target.value

contentEditable事件应为“onInput”

---

在

ContentInput

上使用

onInput

而不是

onChange

并在

desChange

上使用

e.target.innerHTML

而不是

e.target.value

contentEditable事件应为“onInput”

---

谢谢，这部分解决了问题，但仍面临两个问题，1。复制粘贴文本时，它会显示html元素以及文本。2.我尝试了text:e.target.innerHTML+emoji，但显示错误，文本未定义。谢谢，这部分解决了问题，仍然面临两个问题，1。复制粘贴文本时，它会显示html元素以及文本。2.我尝试了文本：e.target.innerHTML+emoji，但显示错误，文本未定义。

// Content Input Model

import React, { Fragment } from 'react'
import '../../assets/css/comment.css'

const ContentInput = ({valueChange,contentInputId,ref,onClick,onPhClick,placeholder,  ...props }) => {
    return (
        <Fragment>
      <div
          spellCheck="false"
          role="textbox"
          id={contentInputId}
          ref={ref}
          contentEditable="true"
          onChange={valueChange}
          aria-multiline="true"
          data-placeholder={placeholder}
          {...props}
      />
            <div className="comment_submit_button" onClick={onClick}>
                <span className='submit_arrow_light'>  </span>
            </div>
        </Fragment>
    )
};
export default ContentInput

// Comment Modal///

import React , {Component} from 'react';
import EmojiPicker from 'emoji-picker-react'
import '../../../../assets/css/comment.css'
import JSEMOJI from 'emoji-js'
import ContentInput from "../../../../UIElements/Inputs/ContentInput";
//emoji set up
let jsemoji = new JSEMOJI();
// set the style to emojione (default - apple)
jsemoji.img_set = 'emojione';
// set the storage location for all emojis
jsemoji.img_sets.emojione.path = 'https://cdn.jsdelivr.net/emojione/assets/3.0/png/32/';

class CommentModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text : ' ' ,
            emojiShown : false ,
        };
        this.desChange = this.desChange.bind(this);
    }
    desChange = (e) => {
        // let text = this.state.text;
        this.setState({text : e.target.value});

    };
    comment = (e) => {
        e.preventDefault();
        let {text} = this.state;
        let {back , incrementComments , ...rest} = this.props;
        const updatedText = this.setState({text : e.target.value});
        console.log(updatedText);
    };
    //displays emoji inside the input window
    handleEmojiClick = (n , e) => {
        let emoji = jsemoji.replace_colons(`:${e.name}:`);

        this.setState({
            text : e.target.value + emoji ,
            emojiShown : !this.state.emojiShown
        });
        console.log(this.emojiShown)
    };

    toggleEmojiState = () => {
        this.setState({
            emojiShown : !this.state.emojiShown
        });
    };

    render() {
        return (
            <div className='comment_model_container display_none'>
                <div className="comment_content_container global_bt">
                    <div className="comment_text_area_container ">
                        <ContentInput
                            valueChange={this.desChange}
                            contentInputId='comment_box'
                            onClick={this.comment}
                            spellcheck="true"
                            className='comment_text_area global_bt'
                            placeholder='Leave a comment...'
                        />
                    </div>
                    <div>
                    </div>
                    <div className='emoji_container'>
                        <span id="show-emoji-yes" onClick={!this.toggleEmojiState}><span
                            className='grey_smiley_icon'> </span></span>
                        <div className="emoji-table">
                            <EmojiPicker onEmojiClick={this.handleEmojiClick} className='emoji_popup'/>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default CommentModal;
```