title: adding event listener for keydown to react element
body: <p>I'm trying to add an event listener for <code>keydown</code> event in an image (or div) tag. It works if I add it to the document with <code>document.addEventListener</code>, but it doesn't when I try to put it into the specific element that I create in react (I noted in the code what works and what doesn't). Also <code>handleClick</code> works and <code>handleKey</code> does not, no matter which format I put it into the tag with.</p>
  
  <pre><code>class PrescriptionImage extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        error: null,
        isLoaded: false,
        patient: "",
        rotation: 0
      };
      this.handleKey = this.handleKey.bind(this);
    }
  
    handleClick() {
      this.setState({rotation: this.state.rotation + 270})
    }
  
    handleKey(e) {
      e.preventDefault();
      console.log(e);
      if (e.code == 'ArrowLeft') {
        if (e.ctrlKey) {
          this.setState({rotation: this.state.rotation + 270})
        }
      }
    }
  
    componentDidMount() {
  //    document.getElementById("left").addEventListener("keydown", this.handleKey, true); This doesn't work (no error)
  //    this.RxImage.addEventListener("keydown", this.handleKey, false); This doesn't work, (can't find addEventListener of "undefined")
  //    document.addEventListener("keydown", this.handleKey, false); This works.
      fetch("http://localhost:3333/patientAddress.json")
        .then(res =&gt; res.json())
        .then(
          result =&gt; {
            this.setState({
              isLoaded: true,
              patient: result.order.patient
            });
          },
          error =&gt; {
            this.setState({
              isLoaded: true,
              error
            });
          }
        );
    }
  
    componentWillUnmount(){
      document.removeEventListener("keydown", this.handleKey, false);
    }
  
    render() {
      const { error, isLoaded, patient, rotation } = this.state;
      if (error) {
        return &lt;div&gt;Error: {error.message}&lt;/div&gt;;
      } else if (!isLoaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      } else {
        return &lt;img className="prescription-image" style={{width: "98%", height: "98%", transform: `rotate(${rotation}deg)`}} src={"data:image/png;base64," + patient.rx.imageData} onClick={() =&gt; this.handleClick()} onKeyDown={this.handleKey} /&gt;;
      }
    }
  }
  
  ReactDOM.render(&lt;PrescriptionImage /&gt;, document.getElementById("left"));
  </code></pre>