Cộng đồng Hỏi & Đáp của Inflearn

Không có người viết

Bài viết có thông tin người viết đã bị xóa.

Học React bằng cách tạo trò chơi trên web

phương thức lớp

value에 대해 질문드립니다.

Đã giải quyết

Viết

208

안녕하세요.

강사님께서 알려주신대로 작성한 것 같은데 정답일 때 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>

react

Quiz

55% người trả lời sai. Hãy thử ngay!

리액트와 같은 자바스크립트 프레임워크/라이브러리가 복잡한 웹 애플리케이션 개발에 등장한 주된 이유(문제 해결)는 무엇일까요?

서버 부하를 줄이기 위해

데이터와 화면 간의 일관성을 효율적으로 관리하기 위해

데이터베이스 연동을 더 쉽게 하기 위해

웹사이트의 초기 로딩 속도를 무조건 빠르게 하기 위해

Câu trả lời 2