试图重构React应用程序以引起react-redux发行卷滑块

发布于 2025-01-26 23:20:04 字数 783 浏览 1 评论 0原文

我一直在做freecodecamps鼓机应用程序。我能够完全使用React完成该应用程序，但我制作了一份副本，以尝试将React-Redux一起使用，并且在试图重构输入滑块时我的操作并不正确。它不会更改剪辑的音量，也不会随着卷更改而更新显示屏。

这是我的工作反应应用仅反应鼓机

这是我试图重构的人 react-recept-redux鼓机

这是我试图理解很多我的人，如何付诸实践我从freecodecamp学到的东西 j8ahmed鼓机

我认为这可能是此代码的东西，但我不确定

<input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.volumeToggle(e)}}/>

原文

I've been doing freecodecamps Drum Machine app. I was able to complete the app completely with React but I made a copy to try and get familiar with using react-redux together and I'm not doing something correct when trying to refactor the input slider. It will not change the volume of the clips and it does not update the display with the volume change.

This is my working react app
React Only Drum Machine

This is the one I'm trying to refactor
React-Redux Drum Machine

This is a guy that I patterned a lot of mine from trying to understand how to put into practice what I learned from freecodecamp
J8ahmed Drum Machine

I think it might be something about this code here but I'm not sure

<input type="range" min="0" max="1" step=".1" value={this.props.volume} className="slider" id="myRange" onChange={(e)=>{this.props.volumeToggle(e)}}/>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

柠栀 2025-02-02 23:20:04

事实证明，这是一个简单的错误，我将此卷函数分配给了UpdateVolume，但是在控制类中，我尝试调用this.props.powertoggle（）。以下是正确的代码。非常感谢J8ahmed，当我专门给他发出消息并帮助我看到错误时，他看了一下。

App Class

<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}/>

Controls类

<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>

Turned out it was a simple error in the App class I assigned this volumeToggle function to updateVolume but in the control class I tried to call this.props.powerToggle(). Below is the correct code. A big thank you to J8ahmed who took a look at it when I messaged him specifically and helped me see the error.

App Class

<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}/>

Controls Class

<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>

回复收藏 0 原文

~没有更多了~