reactjs - 絵文字ピッカーから絵文字を反応スレートに追加する

Question

私は Two パッケージを使用 slate-reactしemoji-mart ていますが、 Emoji を選択すると、エディターに配置されます。

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;

import React,{useState} from 'react';
import 'emoji-mart/css/emoji-mart.css';
import { Picker } from 'emoji-mart';

function Emoji() {
    const [emoji,setEmoji] = useState(null);
    const addEmoji = (e) => {
        setEmoji(e.native)
    };
    return <Picker onSelect={addEmoji} />
}
export default Emoji;