He estado haciendo la aplicación Drum Machine de freecodecamps. Pude completar la aplicación por completo con React, pero hice una copia para tratar de familiarizarme con el uso de react-redux juntos y no estoy haciendo algo correcto cuando intento refactorizar el control deslizante de entrada. No cambiará el volumen de los clips y no actualizará la pantalla con el cambio de volumen.
Esta es mi aplicación de reacción en funcionamiento React Only Drum Machine
Este es el que estoy tratando de refactorizar React-Redux Drum Machine
Este es un chico que modelé mucho tratando de entender cómo poner en práctica lo que aprendí de freecodecamp J8ahmed Drum Machine
Creo que podría ser algo sobre este código aquí, pero no estoy seguro
<input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.volumeToggle(e)}}/>Resultó que fue un simple error en la clase de la aplicación. Asigné esta función de cambio de volumen a updateVolume, pero en la clase de control traté de llamar a this.props.powerToggle(). A continuación se muestra el código correcto. Muchas gracias a J8ahmed, quien lo revisó cuando le envié un mensaje específico y me ayudó a ver el error.
Clase de aplicación
<Controls power={this.props.power} volume={this.props.volume} bank={this.props.bank} info={this.props.info} powerToggle={this.powerToggle} bankToggle={this.bankToggle} updateVolume={this.volumeToggle}/>Clase de controles
<div id="volume-container"> <h1>Volume</h1> <div class="slidecontainer"> <input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.updateVolume(e)}}/> </div> </div>