我在React中构建一个基于this guide的自定义音频播放器组件，并对其进行了一些修改/添加。我遇到的问题是应该在常规音量图标和划掉的音量图标之间切换的MutantToggle按钮没有更新。从功能上讲，它可以工作，但单击时似乎无法呈现适当的图标。
我对应该做的事情感到困惑，因为据我所知，我正在执行与“播放/暂停”按钮完全相同的过程，该按钮在单击时会更新。
我应该提到的是，该组件是GatsbyJS中构建的静态网站的一部分。
这是代码（所有其他东西都按预期工作）：
import React from 'react'
import {MdPlayCircleOutline, MdPauseCircleOutline, MdVolumeOff, MdVolumeUp} from "react-icons/lib/md"
import '../styles/audioplayer.css'
export default class AudioPlayer extends React.Component {
constructor(props) {
super(props);
this.state = {
play: false,
lastVolume: this.volume5,
isMute: false
};
}
componentDidMount() {
this.audio.addEventListener("timeupdate", () => {
let ratio = this.audio.currentTime / this.audio.duration;
let position = (this.timeline.offsetWidth * ratio) + this.timeline.offsetLeft;
this.positionHandle(position);
});
}
positionHandle = (position) => {
let timelineWidth = this.timeline.offsetWidth - this.handle.offsetWidth;
let handleLeft = position - this.timeline.offsetLeft;
if (handleLeft >= 0 && handleLeft <= timelineWidth) {
this.handle.style.marginLeft = handleLeft + "px";
this.played.style.width = handleLeft + "px";
}
if (handleLeft < 0) {
this.handle.style.marginLeft = "0px";
this.played.style.width = "0px";
}
if (handleLeft > timelineWidth) {
this.handle.style.marginLeft = timelineWidth + "px";
this.played.style.width = timelineWidth + "px";
}
}
mouseMove = (e) => {
this.positionHandle(e.pageX);
this.audio.currentTime = ((e.pageX - this.timeline.offsetLeft) / this.timeline.offsetWidth) * this.audio.duration;
}
mouseUp = (e) => {
window.removeEventListener('mousemove', this.mouseMove);
window.removeEventListener('mouseup', this.mouseUp);
}
mouseDown = (e) => {
window.addEventListener('mousemove', this.mouseMove);
window.addEventListener('mouseup', this.mouseUp);
}
play = () => {
if (this.state.play) {
this.setState({ play: false });
this.audio.pause();
} else {
this.setState({ play: true });
this.audio.play();
}
}
mute = () => {
if (!this.state.isMute) {
this.audio.volume = 0;
this.setState({ isMute: true });
this.volBlock1.style.background = "#a4a4a4";
this.volBlock2.style.background = "#a4a4a4";
this.volBlock3.style.background = "#a4a4a4";
this.volBlock4.style.background = "#a4a4a4";
this.volBlock5.style.background = "#a4a4a4";
console.log("isMute: ", this.state.isMute);
} else {
this.setState({ isMute: false });
this.state.lastVolume();
console.log("isMute: ", this.state.isMute);
}
}
volume1 = () => {
this.audio.volume = 0.2;
this.setState({ lastVolume: this.volume1 });
this.volBlock1.style.background = "#000000";
this.volBlock2.style.background = "#a4a4a4";
this.volBlock3.style.background = "#a4a4a4";
this.volBlock4.style.background = "#a4a4a4";
this.volBlock5.style.background = "#a4a4a4";
}
volume2 = () => {
this.audio.volume = 0.4;
this.setState({ lastVolume: this.volume2 });
this.volBlock1.style.background = "#000000";
this.volBlock2.style.background = "#000000";
this.volBlock3.style.background = "#a4a4a4";
this.volBlock4.style.background = "#a4a4a4";
this.volBlock5.style.background = "#a4a4a4";
}
volume3 = () => {
this.audio.volume = 0.6;
this.setState({ lastVolume: this.volume3 });
this.volBlock1.style.background = "#000000";
this.volBlock2.style.background = "#000000";
this.volBlock3.style.background = "#000000";
this.volBlock4.style.background = "#a4a4a4";
this.volBlock5.style.background = "#a4a4a4";
}
volume4 = () => {
this.audio.volume = 0.8;
this.setState({ lastVolume: this.volume4 });
this.volBlock1.style.background = "#000000";
this.volBlock2.style.background = "#000000";
this.volBlock3.style.background = "#000000";
this.volBlock4.style.background = "#000000";
this.volBlock5.style.background = "#a4a4a4";
}
volume5 = () => {
this.audio.volume = 1;
this.setState({ lastVolume: this.volume5 });
this.volBlock1.style.background = "#000000";
this.volBlock2.style.background = "#000000";
this.volBlock3.style.background = "#000000";
this.volBlock4.style.background = "#000000";
this.volBlock5.style.background = "#000000";
}
render() {
let playButton = null;
if (!this.state.play) {
playButton = <MdPlayCircleOutline className="pButton" onClick={this.play} />
} else {
playButton= <MdPauseCircleOutline className="pButton" onClick={this.play} />
}
let muteToggle = null;
if(!this.state.isMuted) {
muteToggle = <MdVolumeUp onClick={this.mute} />;
} else {
muteToggle = <MdVolumeOff onClick={this.mute} />;
}
return(
<div id="audioplayer">
<audio id="music" ref={(audio) => { this.audio = audio } } controls>
<source src={this.props.audio} />
</audio>
{playButton}
<div id="timeline" onClick={this.mouseMove} ref={(timeline) => { this.timeline = timeline }}>
<div id="played" ref={(played) => {this.played = played}} />
<div id="handle" onMouseDown={this.mouseDown} ref={(handle) => { this.handle = handle }} />
</div>
<div className="volume-container">
{muteToggle}
<div className="volume-item" onClick={this.volume1} >
<div className="volume-block" ref={(volBlock1) => {this.volBlock1 = volBlock1}} />
</div>
<div className="volume-item" onClick={this.volume2} >
<div className="volume-block" ref={(volBlock2) => {this.volBlock2 = volBlock2}} />
</div>
<div className="volume-item" onClick={this.volume3} >
<div className="volume-block" ref={(volBlock3) => {this.volBlock3 = volBlock3}} />
</div>
<div className="volume-item" onClick={this.volume4} >
<div className="volume-block" ref={(volBlock4) => {this.volBlock4 = volBlock4}} />
</div>
<div className="volume-item" onClick={this.volume5} >
<div className="volume-block" ref={(volBlock5) => {this.volBlock5 = volBlock5}} />
</div>
</div>
</div>
)
}
}当然，如果您发现可以重构或改进我的代码的其他地方，我欢迎您提出建议。
最佳答案
使用isMute字段而不是isMuted
let muteToggle = null;
if(!this.state.isMute) {
muteToggle = <MdVolumeUp onClick={this.mute} />;
} else {
muteToggle = <MdVolumeOff onClick={this.mute} />;
}
关于javascript - react 条件渲染在一个地方工作，但不在同一组件中的其他地方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49039095/