ReactでボタンのonClick on key pressをトリガーする

Question

基本的にフォームのないログインページがあり、ユーザーがenterを押したときにログインボタンのonClickをトリガーしたい。

私はそうのようなページにイベントリスナーを追加してみました：

componentWillMount() { 
    const { handleKeyPress, username, password } = this.props; 
    document.addEventListener('keydown', (event, username, password) => handleKeyPress(event.key)); 
} 

問題はそのリスナーが時に小道具のユーザー名とパスワードが初期状態（にあることを意味する部品のマウントインスタンス化されていることです空の）。

同様の理由から、componentWillReceivePropsにイベントリスナーを追加することはできません。

基本的にこのソリューションでは、イベントリスナーの関数からユーザー名とパスワードを送信せず、代わりにイベントリスナーの関数が定義されているmapDispatchToPropsの状態からユーザー名とパスワードを取得する必要がありますが、醜い孤独。

<button 
    onEnterKeyPress={() => handleLogin(this.props.username, this.propspassword)} 
> 
    Log in 
</button> 

しかし、私の知る限りではそれを行う方法はありません..：

は私が初めに探していたことなど、基本的にonClickのに似て、ボタンにリスナーを追加しましたうまくいけば私は間違っている！誰かがアイディアを持っている場合は、共有してください。

Answer 1

constructor() { 
    super(); 
    this.handleKeyPress = this.handleKeyPress.bind(this); 
} 

componentWillMount() { 
    document.addEventListener('keydown', this.handleKeyPress); 
} 

handleKeyPress(event) { 
    if (event.keyCode !== 13) return; 

    const {handleLogin, username, password} = this.props; 

    handleLogin(username, password); 
} 

componentWillUnmount() { 
    document.removeEventListener('keydown', this.handleKeyPress); 
}