2

Estoy intentando aprender React haciendo una simple "maquina de sonidos".

Pues bien quiero que cuando se pulse una tecla o se haga click en cualquiera de los .drum-pad se active esta clase (digamos que la clase se activaría en cada uno de los div .drum-pad)

    .onclickonkeyed{
  background: white;
  -webkit-transition: background-color 300ms linear;
   -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

¿Eso se puede hacer de una vez?

¿O cómo se debería hacer?

Tengo esto de momento:

class DrumPad extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <div id="grid-keys">
        <div className="drum-pad" id="Heater-1"><audio src="" className="clip" id="Q"></audio>Q</div>
        <div className="drum-pad" id="Heater-2"><audio src="" className="clip" id="W"></audio>W</div>
        <div className="drum-pad" id="Heater-3"><audio src="" className="clip" id="E"></audio>E</div>
        <div className="drum-pad" id="Heater-4"><audio src="" className="clip" id="A"></audio>A</div>
        <div className="drum-pad" id="Clap"><audio src="" className="clip" id="S"></audio>S</div>
        <div className="drum-pad" id="Open-HH"><audio src="" className="clip" id="D"></audio>D</div>
        <div className="drum-pad" id="Kick-n'-Hat"><audio src="" className="clip" id="Z"></audio>Z</div>
        <div className="drum-pad" id="Kick"><audio src="" className="clip" id="X"></audio>X</div>
        <div className="drum-pad" id="Closed-HH"><audio src="" className="clip" id="C"></audio>C</div>
      </div>
    )
  }
}

class App extends React.Component {
  constructor(props){
    super(props)
  }
  render(){
    return (
      <div id="drum-machine">
        <DrumPad />
        <div id="display">"SOUND"</div>
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))
body{
  background:
linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px;

}

#drum-machine{
  width: 40%;
  margin: 0 auto;
  padding: 30px;
  background: #8C271E;
  border: 6px solid #BD632F;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  font-family: arial;
  display: flex;
}
#display{
  font-style: italic;
  background: #D9D1D4;
  height: 20PX;
  width: 70px;
  padding: 10px 25px 10px 25px;
  border: 2px solid #7C7C7C;
  margin-left: 60px;
  margin-top: 60px;
}
#grid-keys{
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 10px;
}
  #grid-keys .drum-pad{
    background: #D8973C;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
  }
.onclickonkeyed{
  background: white;
  -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

1 respuesta 1

3

Te recomiendo cambiar de enfoque. Imagina que agregues 50 tecla más; tendrías que escribir 50 div manualmente. Not much fun.


Componente Tecla

Crea un componente que represente una tecla. Esta tecla va a recibir como propiedad la letra que va a renderizar.

export class DrumPad extends React.Component {
  
  render() {
    const clazz = classnames({
      "drum-pad": true
    })
    return (
      <button className={clazz}>
        {this.props.char}
      </button>
    )
  }
}

Esta clase debe manejar el evento click. Lo que haremos será añadir la clase active si el botón ha sido presionado. Luego de un tiempo razonable, le quitaremos la clase.

Primero creamos el estado:

state = { active: false }

Posteriormente, creamos el método highlight, quien se encargará de actualizar el estado para cambiar el valor de active.

highlight = (flag, cb) => {
  this.setState({ active: flag }, cb)
}

Ahora, añadiremos unas variables a la clase:

  • runningAnimation: indica si está ejecutándose la animación y evitar hacer una doble.
  • HIGHLIGHT_TIMEOUT: indica el tiempo máximo que durará la animación.
  • sound: variable de tipo Audio que nos servirá para referenciar el archivo de audio y ejecutarla.

HIGHLIGHT_TIMEOUT = 120 /* 0.12 segundos - duración del press */
runningAnimation = false
sound = new Audio('/ruta/al/archivo/de/sonido.wav')

Ahora, crearemos el método que se encargue de disparar estas acciones cuando se presione el botón:

activate = () => {
  if (this.runningAnimation) {
    return
  }
  this.highlight(true, () => {
    this.sound.play() // tocamos el audio
    this.runningAnimation = true
    // inmediatamente después que tocamos el audio
    // y agregamos la clase 'active', esperamos
    // 0.12s para removerla.
    setTimeout(() => {
      this.highlight(false, () => {
        this.runningAnimation = false
      })
    }, this.HIGHLIGHT_TIMEOUT)
  })
}

Hasta aquí ya tenemos nuestra tecla funcional. Si presionas el botón, se debe agregar la clase active produciendo una animación de presión y se reproduce el sonido.

 Componente Teclado

En este componente vamos renderizar tantos componentes DrumPad como letras tengamos. Para esto, vamos a guardar en el estado un array de teclas:

class App extends React.Component {
  state = {
    keys: ["Q", "W", "E", "R", "T", "Y"]
  }
  keysRefs = []
}

Seguido, vamos a convertirlas en componentes DrumPad:

render() {
  return (
    <div className="grid-keys">
      { this.state.keys.map(key => {
          const ref = React.createRef();
          this.keysRefs.push({
            [key.toLowerCase()]: ref
          });
          return <DrumPad key={key} char={key} ref={ref} />;
        })
      }
    </div>
  )
}

Y procedemos a registrar los listeners en componentDidMount:

componentDidMount() {
  document.addEventListener("keypress", this.onKeyDown)
}

Si te fijas, hemos creado un ref por cada tecla y la hemos guardado en una variable array keysRefs, esto nos servirá para que cuando presionemos una tecla en nuestro teclado, obtener el componente asociado a dicha tecla y poder disparar manualmente el método activate.

Observa la implementación de onKeyDown:

onKeyDown = e => {
  e.stopPropagation()
  const char = String.fromCharCode(e.keyCode).toLowerCase()
  // encontramos el objeto que contenga como clave, la tecla presionada
  const refObject = this.keysRefs.find(ref => ref[char])
  if (refObject) {
    const ref = refObject[char] // obtenemos el ref
    ref.current.activate() // ejecutamos el método activate de DrumPad
  }
}

Esto es lo interesante de los refs: puedes acceder a métodos dentro de los componentes. Esto nos permitirá usar la misma lógica tanto si el botón fue presionado o si la tecla fue la presionada.


Ejemplo

class DrumPad extends React.Component {
  state = { active: false };
  HIGHLIGHT_TIMEOUT = 120;
  runningAnimation = false;
  audio = new Audio("");

  activate = () => {
    if (this.runningAnimation) {
      return;
    }
    this.highlight(true, () => {
      this.audio.play();
      this.runningAnimation = true;
      setTimeout(() => {
        this.highlight(false, () => {
          this.runningAnimation = false;
        });
      }, this.HIGHLIGHT_TIMEOUT);
    });
  };

  highlight = (flag, cb) => {
    this.setState({ active: flag }, cb);
  };

  render() {
    const clazz = classNames({
      "drum-pad": true,
      active: this.state.active
    });
    return (
      <button className={clazz} onClick={this.activate}>
        {this.props.char}
      </button>
    );
  }
}

class KeyGrid extends React.Component {
  state = {
    keys: ["Q", "W", "E", "R", "T", "Y"]
  };
  keysRefs = [];

  componentDidMount() {
    document.addEventListener("keypress", this.onKeyDown);
  }

  onKeyDown = e => {
    e.preventDefault();
    e.stopPropagation();
    const char = String.fromCharCode(e.keyCode).toLowerCase();
    const refObject = this.keysRefs.find(ref => ref[char]);
    if (refObject) {
      const ref = refObject[char];
      ref.current.activate();
    }
  };

  render() {
    return (
      <div className="grid-keys">
        {this.state.keys.map(key => {
          const ref = React.createRef();
          this.keysRefs.push({
            [key.toLowerCase()]: ref
          });
          return <DrumPad key={key} char={key} ref={ref} />;
        })}
      </div>
    );
  }
}

function App() {
  return (
     <KeyGrid />
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
html {
   box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.grid-keys {
  background: #5b626a;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100vh;
}
.grid-keys .drum-pad {
  margin: 0 5px;
}
.drum-pad {
  /* border: 2px solid #aaa; */
  align-items: center;
  display: flex;
  justify-content: center;
  background: #5b626a;
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.5), 0 -1px 0 0 rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  /* padding: 5px 10px; */
  outline: none;
  transition: all 150ms ease;
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.drum-pad.active {
  background-color: #4b5157;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 -1px 0 0 rgba(0, 0, 0, 0.24);
  transform: translateY(2px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.6/index.min.js"></script>
<div id="root"></div>

2
  • Si dejo presionada la tecla no se mantiene presionada :/ el 18 may. 2019 a las 23:01
  • 1
    @jdnichollsc Un punto interesante para que lo tome en cuenta el OP ;)
    – gugadev
    el 19 may. 2019 a las 1:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.