카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

해결됨

value에 대해 질문드립니다.

20.12.24 18:50 작성 조회수 104

안녕하세요.

강사님께서 알려주신대로 작성한 것 같은데 정답일 때 number(value)의 값이 초기화가 안되어 문의드립니다. 제가 수동으로 지워야만 지워집니다.. 테스트는 크롬으로 진행하였습니다.

따로 스크립트 오류는 안나는 것 같은데 제가 뭘 잘못하고 있는 걸까요?

<html>
    <head>
        <meta charset="UTF-8" />
        <title>구구단</title>
        <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>
    <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: '', // 결과값
                    }
                }

                // html 안에 script 를 따로 빼서 onSubmit() 메소드로 변경
                onSubmit = (e) => {
                    e.preventDefault();
                    if(parseInt(this.state.value) === this.state.first * this.state.second) {
                        this.setState({
                            result: '정답',
                            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 (
                        <div>
                            <div>{this.state.first} * {this.state.second} = ?</div>
                            <form onSubmit={this.onSubmit}>
                                <input type="number" vaule={this.state.value} onChange={ this.onChange } />
                                <button>입력</button>
                            </form>
                            <div>{this.state.result}</div>
                        </div>
                    );
                }
            }
        </script>
        <script type="text/babel">
            ReactDOM.render(<GuGuDan />, document.querySelector('#root'));
        </script>
    </body>
</html>