sự kiện onKeyDown không hoạt động trên divs trong React

Question

Tôi muốn sử dụng sự kiện keyDown trên div trong React. Tôi làm:

componentWillMount() { 
     document.addEventListener("keydown", this.onKeyPressed.bind(this)); 
    } 

    componentWillUnmount() { 
     document.removeEventListener("keydown", this.onKeyPressed.bind(this)); 
    }  

    onKeyPressed(e) { 
    console.log(e.keyCode); 
    } 

    render() { 
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; 
    return (
     <div 
     className="player" 
     style={{ position: "absolute" }} 
     onKeyDown={this.onKeyPressed} // not working 
     > 
     <div className="light-circle"> 
      <div className="image-wrapper"> 
      <img src={IMG_URL+player.img} /> 
      </div> 
     </div> 
     </div> 
    ) 
    } 

Nó hoạt động tốt, nhưng tôi muốn làm nhiều hơn trong kiểu phản ứng. Tôi đã thử

 onKeyDown={this.onKeyPressed} 

trên thành phần. Nhưng nó không phản ứng. Nó hoạt động trên các yếu tố đầu vào như tôi nhớ lại.

Codepen: http://codepen.io/lafisrap/pen/OmyBYG

Tôi làm cách nào?

Answer 1

Bạn nên sử dụng tabIndex thuộc tính để có thể lắng nghe onKeyDown sự kiện trên một div trong phản ứng. Cài đặt tabIndex = "0" sẽ kích hoạt trình xử lý của bạn.

Answer 2

Bạn cần phải viết nó theo cách này

<div 
    className="player" 
    style={{ position: "absolute" }} 
    onKeyDown={this.onKeyPressed} 
    tabIndex="0" 
    > 

Nếu onKeyPressed không bị ràng buộc để this, sau đó cố gắng viết lại nó sử dụng chức năng mũi tên hoặc ràng buộc nó trong thành phần constructor.

Answer 3

Bạn đang suy nghĩ quá nhiều về Javascript thuần túy. Loại bỏ các thính giả của bạn trên các phương pháp vòng đời React đó và sử dụng event.key thay vì event.keyCode (vì đây không phải là đối tượng sự kiện JS, nó là một React SyntheticEvent). Toàn bộ thành phần của bạn có thể đơn giản như thế này (giả sử bạn không ràng buộc các phương thức của bạn trong một hàm tạo).

onKeyPressed(e) { 
    console.log(e.key); 
} 

render() { 
    let player = this.props.boards.dungeons[this.props.boards.currentBoard].player; 
    return (
    <div 
     className="player" 
     style={{ position: "absolute" }} 
     onKeyDown={(e) => this.onKeyPressed(e)} 
    > 
     <div className="light-circle"> 
     <div className="image-wrapper"> 
      <img src={IMG_URL+player.img} /> 
     </div> 
     </div> 
    </div> 
) 
}