Phản ứng không đáp ứng với sự kiện quan trọng

Question

Tôi đang cố gắng thực hiện một số phát hiện nhấn phím rất cơ bản và tôi không thể làm cho nó hoạt động. Tôi có một thành phần trần rằng nên được chọn lên trên các sự kiện onKeyDown nhưng không bị đăng xuất khỏi trong giao diện điều khiển:

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleKeyDown(event) { 
    console.log('handling a key press'); 
    } 

    render() { 
    return (
     <ChildComponent onKeyDown={this.handleKeyDown} /> 
    ); 
    } 
} 

React.render(<App />, document.getElementById('app')); 

Answer 1

Vấn đề là ChildComponent không phải là thành phần mà là nhà máy thành phần. Nó sẽ được thay thế bằng kết quả của việc hiển thị phần tử được tạo với nhà máy đó.

Chèn ChildComponent vào div và đính kèm bất kỳ trình xử lý sự kiện nào vào div, chứ không phải ChildComponent. Thay thế <div> bằng <span> nếu bạn cần hiển thị nội tuyến.

let {Component} = React; 

class ChildComponent extends Component { 
    render() { 
    return (<child-component>click me</child-component>); 
    } 
} 

class App extends Component { 
    handleClick(event) { 
    console.log('handling a key press'); 
    } 

    render() { 
    return (<div onClick={this.handleClick}><ChildComponent /></div>); 
    } 
} 

React.render(<App />, document.getElementById('app')); 

Nhìn thấy nó trong hành động trên codepen

Answer 2

Bạn sẽ cần phải gán một -attribute tabIndex cho các phần tử của bạn (các yếu tố gói ví dụ) để nó nhận được nhấn phím. Sau đó vượt qua handler keyDown để nó với các đạo cụ:

import React from 'react'; 
import { render } from 'react-dom'; 

class ChildComponent extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    render() { 
    return (
     <div tabIndex="0" onKeyDown={this.props.handleKeyDown}>Fooo</div> 
    ); 
    } 
} 

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    } 

    handleKeyDown(event) { 
    console.log('handling a key press'); 
    } 

    render() { 
    return (
     <ChildComponent handleKeyDown={() => this.handleKeyDown()} /> 
    ); 
    } 
} 

render(<App />, document.getElementById('app')); 

Answer 3

Trong một ứng dụng đội của tôi đang làm việc trên, chúng tôi đang sử dụng react-hotkey. Thật không may, React dường như không hỗ trợ mixins với cú pháp ES6, nhưng nếu bạn đang mát mẻ với một số babel, bạn có thể cho nó một thử.

let App = React.createClass({ 
    mixins: [hotkey.Mixin('handleKeyDown')], 

    componentDidMount() { 
    hotkey.activate(); 
    }, 

    componentWillUnmount() { 
    hotkey.disable(); 
    }, 

    handleKeyDown(event) { 
    console.log('handling a key press'); 
    }, 

    render() { 
    return (
     <ChildComponent /> 
    ); 
    } 
}); 

React.render(<App />, document.getElementById('app')); 

Answer 4

DOM muốn nguyên tố này được tập trung để nhận sự kiện bàn phím. Nếu bạn không muốn hack phần tử với tabIndex hoặc contentEditable để tập trung vào, bạn có thể sử dụng trình nghe sự kiện DOM gốc trên window và xác định trình xử lý khác trong mỗi thành phần xử lý các sự kiện bàn phím.

Chỉ cần chắc chắn để loại bỏ các sự kiện người nghe khi mà unmounts phần vì vậy tất cả các thành phần không được xử lý tất cả các thời gian:

componentWillMount: function() { 
    window.addEventListener('keydown', this.handleKeyDown); 
    }, 

    componentWillUnmount: function() { 
    window.removeEventListener('keydown', this.handleKeyDown); 
    }, 

Ngoài ra, dường như có một NPM cung cấp chức năng tương tự nếu đó là dễ dàng hơn: https://www.npmjs.com/package/react-keydown