你好我最近開始學習反應,我有一些問題。我正在嘗試製作簡單的反應應用程序,我正在製作的其中一個組件是秒錶。現在我遇到了問題,使用從父組件傳遞給我的秒錶組件的道具。 這是我的應用程序組件:反應秒錶
import React, {Component} from 'react';
import { Form,FormControl, Button} from 'react-bootstrap';
// Compoenents
import Clock from './Clock';
import Stopwatch from './Stopwatch';
// CSS
import './css/app.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
deadline: 'December 31, 2017',
newDeadline: '',
timer: 60,
newTimer: ''
}
}
changeDeadline() {
this.setState({deadline: this.state.newDeadline});
}
checkTimer() {
this.setState({timer: this.state.newTimer});
}
render() {
return (
<div className='app'>
<div className='appTitle'>
Countdown to {this.state.deadline}
</div>
<Clock
deadline={this.state.deadline} // This is how we send props to our child component
/>
<Form inline={true} >
<FormControl
className='deadlineInput'
type="text"
placeholder='Write date to check'
onChange={event => this.setState({newDeadline: event.target.value})}
onKeyPress={event => {
if(event.key === 'Enter') {
event.preventDefault();
this.changeDeadline();;
}
}}
/>
<Button
onClick={() => this.changeDeadline()}
>
Submit
</Button>
</Form>
<div className='stopwatchTitle'>
Use stopwatch to {this.state.timer} seconds
</div>
<Stopwatch
timer={this.state.timer} // This is how we send props to our child component
/>
<Form inline={true} >
<FormControl
className='timerInput'
type="text"
placeholder='Set your timer'
onChange={event => this.setState({newTimer: event.target.value})}
onKeyPress={event => {
if(event.key === 'Enter') {
event.preventDefault();
this.checkTimer();;
}
}}
/>
<Button
onClick={() => this.checkTimer()}
>
Start
</Button>
</Form>
</div>
)
}
}
export default App;
,這是我的秒錶組件:
import React, {Component} from 'react';
// CSS
import './css/stopwatch.css';
class Stopwatch extends Component {
constructor(props) {
super(props);
this.state = {
stopWatch: 0,
}
this.decrementer = null;
}
// This function runs before component completely renders on the application (otherwise we might create infinite loop)
componentWillMount() {
this.startTimer(this.props.timer);
}
startTimer(timer) {
let stopWatch = timer;
console.log(stopWatch)
this.decrementer = setInterval(() =>
this.setState({
stopWatch: this.state.stopWatch - 1
})
, 1000);
}
render() {
return (
<div>
<div className='myStopwatch'> {this.state.stopWatch} seconds</div>
</div>
)
}
}
export default Stopwatch;
眼下應用程序總是從0開始計數,並進入負。我如何使用從父母傳遞給我的孩子組件的計時器道具?我希望我的秒錶開始時間等於我的計時器道具。當它達到0時如何使倒計時停止?
你嘗試過什麼?贏得'這項工作? - 'if(this.state.stopWatch === 0){//不遞減? }' – vijayst