title: react js how to prevent arrow keys from switching controls
body: <p>I am working on react browser-based game where a player can select a unit to place on a battlefield, and then he can use the arrow keys to move the unit around on a map.</p>
  
  <p>The problem is that the list of units is a react radio group, and that pressing the arrow keys also switches the focus from the one radio button to the next, which causes a different unit to be selected by the very same action that was supposed to (and does) move the initial unit, so the whole thing becomes quite confusing.</p>
  
  <p>I use event listeners bound to the <code>componentDidMount</code> method to bind the arrow keys to move the unit.</p>
  
  <pre><code>componentDidMount(){
    ...
    document.addEventListener("keydown", this.handleKeyDown.bind(this));
    document.addEventListener("keyup", this.handleKeyUp.bind(this));
  </code></pre>
  
  <p>While there may be a number of ways to solve this, I would prefer to simply disable the switching of radio-button using the arrow keys. Does anyone know how to turn that off?</p>
  
  <p>I found <a href="https://medium.com/@ericclemmons/react-event-preventdefault-78c28c950e46" rel="nofollow noreferrer">this article</a>, but it mostly goes over my head, and besides I am still hoping there is an easier way to do this.</p>