Почему символ пробела не записывается в текстовой области, когда я запускаю событие нажатия клавиши с правильным кодом?

Question

Я создаю текстовую область и хочу эмулировать нажатие клавиши пробела при возникновении события mouseLeave. Событие не вызывается, и символ пробела не печатается (не печатается) в текстовой области.

В чем может быть причина? Следующий компонент создает текстовую область (для этого я использовал antd).

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Typography } from 'antd';

const { Paragraph } = Typography;

class Demo extends React.Component {
    state = {
        str: 'This is an editable text.',
    };

    onChange = str => {
        console.log('Content change:', str);
        this.setState({ str });
    };

    onMouseLeave = () => {
        const editableAreaContainer = document.querySelector(".container > textarea");
        if (editableAreaContainer) {
            editableAreaContainer.dispatchEvent(new Event("focus"));
            editableAreaContainer.dispatchEvent(new KeyboardEvent("keypress", {
                bubbles: true,
                keyCode: 32
            }));
        }
    }

    render() {
        return (
            <div
                onMouseLeave={this.onMouseLeave}>
                <Paragraph
                    className="container"
                    editable={{
                        onChange: this.onChange,
                        editing: true
                    }}>
                    {this.state.str}
                </Paragraph>
            </div>
        );
    }
}

ReactDOM.render(<Demo />, document.getElementById('container'));

Answer 1

вы объявляете событие keypress там, и даже если вы инициируете его, вы все равно должны обновить состояние, чтобы обновить его. Я думаю, это может помочь вам

onMouseLeave = () => {
let str = this.state.str+"\xa0";
    this.setState({ str })
}