web-dev-qa-db-ja.com

React.jsでkeypressイベントをトリガーする方法

私はReact.jsの初心者です。テキストdivのkeypressイベントをトリガーしようとしています。

ここにキープレストリガーを実行したいテキストボックスコードがあります。

<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);

ありがとう：）

javascriptjqueryjavascript-eventsreactjs
17
Piyush

基本的に、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
Pietro