きどうはんのう
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin 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>次は反応をもっときれいにするために「babel」と言います.
<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({
result : `${this.state.first} x ${this.state.second} = ${this.state.value} 정답!`,
first: Math.ceil(Math.random()*9),
second : Math.ceil(Math.random()*9),
value : ''
})
} else {
this.setState({
result : '땡!!',
value : ''
})
}
}
onChange = (e)=>{this.setState({value: e.target.value})}
render(){
return (
<React.Fragment>
<div>{this.state.first}곱하기 {this.state.second}은?</div>
<form onSubmit = {this.onSubmit}>
<input 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>class形式を用いることで再利用性が向上することが分かる.
Reference
この問題について(きどうはんのう), 我々は、より多くの情報をここで見つけました https://velog.io/@vagabondms/React-시작テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol