inflearn logo
강의

Course

Instructor

Learning React while making web games

Class Method

value에 대해 질문드립니다.

Resolved

211

작성자 없음

0 asked

0

안녕하세요.

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

Answer 2

1

zerocho

vaule 오타입니다.

0

aryooon331342

아..아..! 헐 ㅠㅠ 오타.. 이런..!

감사합니다!

npm run dev 실행 시 포트가 안뜨는 문제

0

202

2

timeouts.current를 useEffect 의 input값으로 넣었을때

0

85

2

렌더링 테스트 코드 (Hooks)

0

80

1

Cannot find package 'react-refesh' 이런 에러 뜨시는 분들 보세요.

0

149

1

해당 에러 뜨는 분들 보세요. "Uncaught TypeError: ReactDom.createRoot is not a function"

1

191

1

강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ

0

95

1

useMemo와 useCallback 사용 시기

0

205

2

onRightClickTd가 작동을 하지 않습니다.

0

226

1

action.type 불러오는 방식

0

222

2

onClickRedo 질문

0

172

1

const Try = require(./Try) 빨간줄

0

248

1

npx webpack 실행시

0

313

1

지뢰찾기 강좌에서 빈칸들 한번에 열기 파트에서 여쭤보고싶은부분이 있어서 글 올립니다.

0

234

1

강좌에서 다루지 않은 기능들은 어떻게 학습하면 좋을까요?

0

311

1

react devtool이 enable 않됩니다.

0

530

2

React 랜더링이 되지 않습니다.

0

409

2

비동기로 동작하는 setState에 대해서

0

331

1

npm run dev 할 때 에러발생

0

478

2

memo, PureComponenet, shouldComponentUpdate 관련 질문

0

206

1

devMiddleware의 필요성

0

352

1

리액트에서 화살표 함수를 사용해야하는 이유

0

931

2

path.join관련질문

0

280

2

2-9. 웹팩 데브 서버와 핫 리로딩 설치과정 시 에러

0

371

1

next.js 에서 이와 비슷한 예제를 돌리고있는데 react랑 달라서 질문 드립니

1

488

4