Как запустить событие нажатия клавиши в файле React.js

Я новичок с React.js. Я пытаюсь вызвать событие нажатия клавиши для текстового div.

Вот код текстового поля, для которого я хочу выполнить запуск нажатия клавиши.

<div id="test23" contenteditable="true" class="input" placeholder="type a message" data-reactid="137">Hii...</div>

и метод нажатия клавиш

onKeyPress: function(e) {
   return "Enter" == e.key ? "Enter key event triggered" : void 0)
}

Я пробовал его с jquery, но я не могу его запустить.

вот мой код React, который я пробовал, но его не работает.

var event = new Event('keypress', {
 'keyCode' : 13,
 'which' : 13,
 'key' : 'Enter'
});
var node = document.getElementById('test23');
node.dispatchEvent(event);

Спасибо:)

Ответ 1

По сути, OnKeydown должен обрабатываться следующим образом. Надеюсь это поможет.

class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = { value: 'hi' }
    }

    onKeyPress = event => {
        if (event.key === 'Enter') {
            this.setState({ value: event.target.value })
        }
    }

    render() {

        return (
            <div>
                <input type="text" onKeyPress={this.onKeyPress} placeholder='press Enter'/>  
                <h1>Value: {this.state.value}</h1>
            </div>
        );
    }
}
export default App;

Рабочая Демо

Ответ 2

Почему вы используете div вместе с keyPress? Возможно, вы можете попробовать заменить div на <input onKeyPress={this.handle} /> fooobar.com/questions/81930/...

Ответ 3

Кто-нибудь знает ответ на вопрос @Piyush?

У меня есть похожая проблема: как вызвать событие ввода "onKeyPress" responsejs, используя простой JavaScript?

Вариант использования: я пишу расширение для браузера, чтобы автоматизировать некоторые действия на веб-странице, написанной вactjs (чтобы не требовать ручных операций над элементами).

Ответ 4

Test util Simulate предназначен для запуска событий во время модульных тестов.