问题描述
所以我有一个问题,我尝试以给定的时间间隔更改组件的状态,但在测试时,错误:TypeError: this.changeIt is not a function
我不确定为什么会发生这种情况。我已经在构造函数中绑定了函数,在调用函数时使用了 this 关键字,但它仍然给我错误。有人可以帮我弄清楚我做错了什么吗?谢谢!
这是我的代码:
import "./timer.css";
import React,{ Component } from "react";
var work = new Audio("work.mp3");
let timeRiNow;
var breakTime = new Audio("break.m4a");
export default class TimerBox extends Component {
constructor(props) {
super(props);
this.state = { timeRem: timeRiNow };
this.handleClick = this.handleClick.bind(this);
this.refreshPage = this.refreshPage.bind(this);
this.changeIt = this.changeIt.bind(this);
}
refreshPage() {
window.location.reload();
}
changeIt(x) {
this.setState({ timeRem: x });
}
handleClick() {
let ii = 0;
if (ii === 1) {
this.refreshPage();
}
ii++;
var brkmin = 5;
var brksec = 0;
var wrkmin = 25;
var wrksec = 0;
if (Number(brkmin) == null) {
brkmin = 0;
}
if (Number(brksec) == null) {
brksec = 0;
}
if (Number(wrkmin) == null) {
wrkmin = 0;
}
if (Number(wrksec) == null) {
wrksec = 0;
}
(function myFunc01() {
//YOUR TIME IN HELL HAS BEGUN
work.play();
let iWrk = Number(wrkmin * 60 + wrksec);
let iBrk = Number(brkmin * 60 + brksec);
// store the interval id to clear in future
var intr = setInterval(function () {
(() => {
timeRiNow = String(
new Date(Math.abs(iWrk - 1) * 1000).toISOString().substr(11,8)
);
})();
this.changeIt(timeRiNow).this.bind();
console.log(timeRiNow);
if (--iWrk < 0) {
clearInterval(intr);
breakTime.play();
// store the interval id to clear in future
var intW = setInterval(function () {
(() => {
timeRiNow = String(
new Date(Math.abs(iBrk - 1) * 1000).toISOString().substr(11,8)
);
})();
this.changeIt(timeRiNow).this.bind();
if (--iBrk < 0) {
clearInterval(intW);
myFunc01();
}
},1000);
}
},1000);
})();
}
render() {
return (
<div>
<center>
<div className="container">
<h1 className="neon">
<span id="neon1">HalfS</span>econd
</h1>
</div>
<center>
<div id="animationn"></div>
</center>
<h2 style={{ color: "#fdf" }}>{this.state.timeRem}</h2>
<br />
<br />
<button className="btn" onClick={this.handleClick} id="yeet">
Click to Start!
</button>
</center>
</div>
);
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)