【发布时间】：2017-09-26 03:44:15
【问题描述】：
我从 react 创建了一个计时器模块，其中有一个输入和三个按钮 1-开始（启动计时器） 2-暂停（暂停计时器） 3-停止（停止计时器），现在问题是当我输入任何值并启动计时器时，当我按下“停止”按钮时，值变为 0，但当我再次点击 “开始”按钮计数器从我在停止按钮时单击的上一个值开始，而不是从之前写入输入字段的值开始。如果您不明白我在说什么，请检查它。
代码：
<!Doctype html>
<html>
<head>
<title>React 1</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<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
}
}
handleChange (e) {
this.setState({ customNumber: e.target.value});
}
componentWillUnmount () {
clearInterval(this.timer)
}
tick () {
if (this.state.customNumber) {
this.setState({
count: (this.state.customNumber--)
})
if (this.state.customNumber <= 0) {
this.setState({ count: 0})
clearInterval(this.timer)
this.setState({ disabled: false })
}
} else {
this.setState({count: (this.state.count - 1)})
}
}
display () {
return ('0' + this.state.count % 100).slice(-2)
}
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>
<div className="input_text" style={inputs}>
<label htmlFor="custom_number">Enter number to start timer</label>
<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" />
</div>
<div style={btns} className="buttons">
<button style={btn} type="button" name="start_btn" id="start_btn" onClick={this.startTimer.bind(this)}>Start</button>
<button style={btn} type="button" name="stop_btn" id="stop_btn" onClick={this.stopTimer.bind(this)}>Pause</button>
<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(this)}的定义。这可能是问题所在。您的状态 --> customCount 没有来自输入的值。 -
我已经定义好了
标签： javascript reactjs timer