ソースコード全文(Reactでカウントダウンタイマーを作る)

code:timer.tsx

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

/// <reference lib="dom" />

interface CountdownTimerProps {

time: number;

}

interface CountdownTimerState {

time: number;

}

class CountdownTimer extends React.Component<

CountdownTimerProps, // propsの型

CountdownTimerState // stateの型

{

private timerID: number;

constructor(props: CountdownTimerProps) {

// 初期化

super(props);

this.state = { time: props.time };

this.timerID = 0;

}

componentDidMount() {

// DOMが描画された後に最初に呼び出される処理

this.timerID = setInterval(

() => this.tick(), // tick関数を定期的に呼び出す

1000, // 1000ms(=1秒)に1回定期的に呼び出す

);

}

componentWillUnmount() {

// DOMが削除される時に呼び出される処理

clearInterval(this.timerID); // これ以上tick関数を呼び出さないようにする

}

tick() {

this.setState({

time: this.state.time - 1,

});

if (this.state.time == 0) console.log("カウントダウンが終了しました。");

}

render(): JSX.Element {

return <input type="text" disabled value={this.state.time} />;

}

}

const root = createRoot(document.body);

root.render(<CountdownTimer time={10} />);

html

js

コンパイル後のJavaScriptソースコードを貼ろうかと思ったけれど、あまりにも長すぎて貼れなかった