1
我在項目中使用ReactJS並希望創建一個具有自我更新和自定義視圖的倒計時。我使用react-countdown-clock。這是非常好的,但我不知道如何自定義視圖,它不顯示分鐘爲0分鐘。然後,我使用用css自定義,但在onEnd()事件,更新日期道具與this.state倒計時不重新啓動。在ReactJS中倒數更新自我和自定義視圖
import React, { Component } from 'react';
import './App.css';
import ReactCountdownClock from 'react-countdown-clock';
import CountDown from 'react-simple-countdown';
class App extends Component {
constructor() {
super();
var t = new Date();
t.setSeconds(t.getSeconds() + 15);
this.state = {
time: 10,
date: t,
}
}
change_time() {
this.setState({
time: 10,
})
}
change_date() {
var t = new Date();
t.setSeconds(t.getSeconds() + 15);
this.setState({
date: t,
})
}
render() {
const messages = {
days: {
plural: 'Days',
singular: 'Day',
},
hours: 'Hours',
mins: 'Min',
segs: 'Seg',
};
return (
<div className="App">
<ReactCountdownClock seconds={this.state.time}
color="#000"
size={300}
onComplete={this.change_time.bind(this)} />
<CountDown
date={this.state.date}
className="MyCoundown"
{...messages}
onEnd={this.change_date.bind(this)} />
</div>
);
}
}
export default App;
忽略那些npm包,它們並不成熟。沒有覆蓋,沒有單元測試.... –