67 lines
1.8 KiB
HTML
67 lines
1.8 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>구구단</title>
|
|
|
|
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--리액트 핵심 코드-->
|
|
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 리액트 코드를 웹에 붙이는 역할-->
|
|
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="text/babel">
|
|
class GuGuDan extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
first: Math.ceil(Math.random() * 9),
|
|
second: Math.ceil(Math.random() * 9),
|
|
value: '',
|
|
result: '',
|
|
};
|
|
}
|
|
|
|
onSubmit = (e) => {
|
|
e.preventDefault();
|
|
if(parseInt(this.state.value) === this.state.first * this.state.second) {
|
|
this.setState((prevState) => {
|
|
return {
|
|
result: '정답 : ' + prevState.value,
|
|
first: Math.ceil(Math.random() * 9),
|
|
second: Math.ceil(Math.random() * 9),
|
|
value: '',
|
|
}
|
|
});
|
|
this.input.focus();
|
|
} else {
|
|
this.setState({
|
|
result: '땡',
|
|
value: '',
|
|
});
|
|
this.input.focus();
|
|
}
|
|
}
|
|
|
|
onChange = (e) => this.setState({ value: e.target.value});
|
|
|
|
onRefInput = (c) => { this.input = c; };
|
|
|
|
render() {
|
|
return (
|
|
<React.Fragment>
|
|
<div>{this.state.first} 곱하기 {this.state.second} 는?</div>
|
|
<form onSubmit={this.onSubmit}>
|
|
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange}/>
|
|
<button>입력!</button>
|
|
</form>
|
|
<div>{this.state.result}</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
</script>
|
|
<script type="text/babel">
|
|
ReactDOM.render(<GuGuDan/>, document.querySelector('#root'));
|
|
</script>
|
|
</body>
|
|
</html> |