如何在ReactJS中获取contentEditable输入的initial和setState值?

问题描述 投票:1回答:1

我正在尝试使用contentEditable div构建一个评论框,并出现以下问题:

  1. 无法获取text属性的初始值。
  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;
```


javascript reactjs contenteditable
1个回答
0
投票

onInput而不是ContentInput上使用onChange

并使用e.target.innerHTMLdesChange而不是e.target.value

contentEditable事件应为'onInput'Content Editable change events

© www.soinside.com 2019 - 2024. All rights reserved.