Q. 자바스크립트 react관련질문좀합니다

김광호 2019. 01. 10.


버튼을 클릭하면 사각형을 특정 공간만큼 움직이려고 하거든요.


  1. import React, { Component } from 'react';

  2. import './App.css';

  3. class App extends Component {

  4. constructor(props) {

  5. super(props);

  6. this.state = {

  7. marginElem: document.getElementById("sq")

  8. }

  9. this.onclick = this.onclick.bind(this);

  10. }

  11. onclick(e) {

  12. this.setState({ marginElem: this.state.marginElem.style.marginLeft + "1.5rem"});

  13. }

  14. render() {

  15. return (

  16. <div style={{marginTop:"3rem", marginLeft: "3rem"}}>

  17. <div id="sq" className="square"></div>

  18. <div>

  19. <input onClick={this.onclick} className="button" type="button" value="click" />

  20. </div>

  21. </div>

  22. );

  23. }

  24. }

  25. export default App;


버튼을 클릭하면 null 이 발생하여 에러가 뜨거든요. 상태를 업데이트 시켜주면 되는거 같은데 어느 부분이 잘못된 건가요?

공유하고 보상받기 ♥︎
댓글 0

2개의 답변이 있습니다.

질문자 & 큐레이터 채택
박정한 답변자인증
CODE 200/프론트엔드 개발 2019. 01. 10
89%의 채택

onclick 함수를

onClick = () => {
  this.setState({
    sqMargin: this.state.sqMargin + 1
  })
}

div#sq를

<div style={{
   marginLeft: `${this.state.sqMargin}rem`
 }}></div>

6번째 줄에 this.state에서 state로 바꿔주시면 될 것 같아요!

https://stackblitz.com/edit/react-ge8q9g

실행 테스트해봤습니다. 참조 부탁드립니다!

댓글 0
Thomas 답변자인증
CHEQUER 2019. 01. 11
11%의 채택
this.state = {
  marginElem: document.getElementById("sq")
}

render후에 #sq가 만들어지기 때문에 marginElem이 null이 되는 상황입니다.

React Refs 문서를 보시고 생각을 다시 하시면 좋겠습니다.

https://reactjs.org/docs/refs-and-the-dom.html

댓글 0