Reactjs 添加表情选择器中的表情符号以反应slate

我用两个包裹

slate react

和

emoji-mart

我想在选择表情符号时，它会显示在我的编辑器上

import React from "react";
import { render } from "react-dom";
import { Editor } from "slate-react";
import { initialValue } from "./initialValue";





// Define our app...
class MyEditor extends React.Component {
    // Set the initial value when the app is first constructed.
    state = {
        value: initialValue
    };

    // On change, update the app's React state with the new editor value.
    onChange = ({ value }) => {
        this.setState({ value });
    };

    onKeyDown = (event, change) => {
        // This used to have stuff in it, but I moved it all to plugins.
    };

    clickMe=()=>{
        this.setState({ value : this.state.value });
    };



    // Render the editor.
    render() {
        return (
            <div>
                <h1 onClick={this.clickMe}>Slate Editor Demo</h1>
                <div style={{ border: "1px solid black", padding: "1em" }}>
                    <Editor
                        value={this.state.value}
                        onChange={this.onChange}
                        onKeyDown={this.onKeyDown}
                        renderNode={this.renderNode}
                        spellCheck={false}
                    />
                </div>
            </div>
        );
    }
}
export default MyEditor;

从“React”导入React；
从“react dom”导入{render}；
从“slate react”导入{Editor}；
从“/initialValue”导入{initialValue}；
//定义我们的应用程序。。。
类MyEditor扩展了React.Component{
//在首次构建应用程序时设置初始值。
状态={
值：initialValue
};
//更改时，使用新的编辑器值更新应用程序的React状态。
onChange=（{value}）=>{
this.setState（{value}）；
};
onKeyDown=（事件、更改）=>{
//以前里面有东西，但我把它们都放到插件上了。
};
点击我=（）=>{
this.setState（{value:this.state.value}）；
};
//渲染编辑器。
render（）{
返回(
Slate编辑器演示
);
}
}
导出默认MyEditor；

import React，{useState}来自“React”；
导入'emoji-mart/css/emoji-mart.css'；
从'emoji-mart'导入{Picker}；
函数Emoji（）{
const[emoji，setEmoji]=useState（null）；
常量addEmoji=（e）=>{
setEmoji（e.native）
};
回来
}
导出默认表情符号；

尝试将编辑器引用传递给选择器。然后在addEmoji方法中的Emoji组件中，尝试editorRef.current.InsertText（e.native）。经过几个小时的努力解决这个问题：

const YourTextEditor = props => {
  const editor = createEditor();
  const addEmoji = async emoji => {
    await setTimeout(() => {
    editor.focus();
  }, 100);
  editor.insertText(emoji.native);
};
 return (
    <>
    <Editor
      value={initialValue}
    />
    <Emoji addEmoji={addEmoji} />
    </>
  );
};

const Emoji = props => {
  return (<Picker onSelect={e => props.addEmoji(e)} />);
};

constyourtexteditor=props=>{
const editor=createEditor（）；
const addEmoji=异步表情=>{
等待设置超时（（）=>{
editor.focus（）；
}, 100);
编辑器.insertText（emoji.native）；
};
返回(
);
};
常量表情符号=道具=>{
返回（props.addEmoji（e）}/>）；
};

const YourTextEditor = props => {
  const editor = createEditor();
  const addEmoji = async emoji => {
    await setTimeout(() => {
    editor.focus();
  }, 100);
  editor.insertText(emoji.native);
};
 return (
    <>
    <Editor
      value={initialValue}
    />
    <Emoji addEmoji={addEmoji} />
    </>
  );
};

const Emoji = props => {
  return (<Picker onSelect={e => props.addEmoji(e)} />);
};