0
1つの入力と3つのボタンがある反応からタイマーモジュールを作成しました。（タイマーを開始します）2-Pause（タイマーを一時停止します）タイマーを停止する）問題は、私が何らかの値を入力してタイマーを開始し、 "Stop"ボタンを押すと値が0になるが、もう一度ヒットするときである。 "Start"ボタンは、私はStopボタンの時にクリックしたのではなく、以前に入力フィールドに書かれた値から始めるべきです。私が何を言っているのか分からない場合は、それをチェックしてください。スタートストップボタンが反応して反応しない
コード：
<!Doctype html>
<html>
<head>
<title>React 1</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://unpkg.com/react-form-with-constraints/dist/react-form-with-constraints.js"></script>
</head>
<body>
<script type="text/jsx">
var styles = {
margin: '2em auto',
width: '300px',
height: '300px',
backgroundColor: '#DD4814',
color: '#ffffff',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-around'
};
var inputs = {
position: 'relative',
bottom: '17%',
left: '20%'
}
var btns = {
position: 'relative',
bottom: '7%'
}
var btn = {
backgroundColor: '#ffffff',
color: '#000000',
borderColor: '#DEB887',
borderRadius: '0.4em',
cursor: 'pointer',
margin: '0 1em',
padding: '0.5em',
display: 'inline-block'
}
class Timer extends React.Component {
constructor (props) {
super(props)
this.state =
{
count: 0,
customNumber: 0
}
}
\t \t \t \t handleChange (e) {
this.setState({ \t customNumber: e.target.value});
}
componentWillUnmount() {
clearInterval(this.timer)
}
tick() {
if (this.state.customNumber) {
\t \t \t \t \t \t this.setState({
\t \t \t \t \t \t \t count: (this.state.customNumber--)
\t \t \t \t \t \t })
\t \t \t \t \t \t if (this.state.customNumber <= 0) {
\t \t \t \t \t \t \t this.setState({ \t count: 0})
\t \t \t \t \t \t \t clearInterval(this.timer)
\t \t \t \t \t \t \t this.setState({ disabled: false })
\t \t \t \t \t \t }
} else {
this.setState({count: (this.state.count - 1)})
}
}
\t \t \t \t
\t \t \t \t display() {
return ('0' + this.state.count % 100).slice(-2)
}
\t \t \t \t
startTimer() {
if (this.state.customNumber == "" || isNaN(this.state.customNumber))
{
alert("Please give some value in number");
} else {
clearInterval(this.timer)
this.timer = setInterval(this.tick.bind(this), 1000)
this.setState({ disabled: true })
}
}
stopTimer() {
clearInterval(this.timer)
}
resetTimer() {
clearInterval(this.timer)
this.setState({count: 0})
this.setState({ disabled: false })
}
render() {
return (
<div style={styles} className='timer'>
<h1 style={{fontSize: '4em'}}>{this.display()}</h1>
\t \t \t \t \t \t <div className="input_text" style={inputs}>
\t \t \t \t \t \t \t <label htmlFor="custom_number">Enter number to start timer</label>
\t \t \t \t \t \t \t <input type="text" name="custom_number" id="custom_number" value={this.state.inputValue} onChange={this.handleChange.bind(this)} disabled={this.state.disabled} placeholder="Enter b/w 1-100" />
\t \t \t \t \t \t </div>
<div style={btns} className="buttons">
\t \t \t \t \t \t \t <button style={btn} type="button" name="start_btn" id="start_btn" onClick={this.startTimer.bind(this)}>Start</button>
\t \t \t \t \t \t \t <button style={btn} type="button" name="stop_btn" id="stop_btn" onClick={this.stopTimer.bind(this)}>Pause</button>
\t \t \t \t \t \t \t <button style={btn} type="button" name="reset_btn" id="reset_btn" onClick={this.resetTimer.bind(this)}>Stop</button>
</div>
</div>
)
}
}
ReactDOM.render(<Timer />, document.getElementById('root'))
</script>
<div id="root"></div>
</body>
</html>
私は 'のonChange = {this.handleChange.bind（本）}'定義を見ることができません。これは問題かもしれません。あなたの状態 - > customCountは入力から値を持っていません。 – Umesh
私はそれを定義しました –