如何在 ReactJS 中获取 contentEditable 输入的初始值和 setState 值？

Question

我正在尝试使用 contentEditable div 构建一个评论框并拥有 以下问题：

1. 无法获取文本属性的初始值。
2. 未从 contentEditable 获取 setState 值。
3. 表情符号出现问题，在使用输入元素时可以正常工作，但不能使用 contentEditable。

使用下面提供的代码，console.log 时我变得不确定， 不知道我错过了什么。

预期结果。

1. 从 contentEditable 中获取键入的值，包括表情符号。

// 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;
```

Answer 1

在ContentInput 上使用onInput 而不是onChange

并在desChange 上使用e.target.innerHTML 而不是e.target.value

contentEditable 事件应该是 'onInput' Content Editable change events