react에서 오류 질문합니다.
조회수 2582회
이렇게 코드를 짰는 데 Uncaught TypeError: Cannot read property 'bind' of undefined 라고 에러가 뜹니다.
<html>
<head>
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/menu.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/button.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/form.min.css"/>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js" charset="utf-8"></script>
<title></title>
</head>
<body>
<header>
<div class="ui top inverted massive menu">
<h6 class="header item">Leaduck</h6>
<a class="item" href="/">홈</a>
<div class="right menu">
<div class="item">
<a href="/users/logout" class="ui primary button large">로그아웃</a>
</div>
</div>
</div>
</header>
<div class="container" id="container"></div>
<script src="/lib/js/comment-es6.js" charset="utf-8" type="text/javascript"></script>
</body>
</html>
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title: '',
text: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChangetitle(event) {
this.setState({title: event.target.title});
}
handleChangetext(event) {
this.setState({text: event.target.text});
}
handleSubmit(event) {
axios({
method: 'post',
url: '/commentpost',
data: {
title: this.state.title,
text: this.state.text
}
}).then(function (response) {
alert('success');
}).catch(function (error) {
alert('error');
});
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div class="ui inverted segment">
<h1 class="ui left floated header">질문하기</h1>
</div>
<div class="ui form">
<div class="field six wide">
<label>제목</label>
<input type="text" class="title" value={this.state.title} onChange={this.handleChangetitle} />
</div>
<div class="field six wide">
<label>내용</label>
<textarea cols="1" class="text" value={this.state.text} onChange={this.handleChangetext}></textarea>
</div>
<br />
<button onClick="submit()" class="huge ui primary button">질문하기</button>
</div>
</form>
);
}
}
ReactDOM.render(<App />, document.getElementsById('container'));
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
ES6 클래스를 사용하는 경우 React 는 this를 autobinding 하지 않습니다.
이 문제를 해결 하는 방법은 여러가지가 있습니다.
React.createClass(...)의 사용 : this를 콤포넌트에 자동으로 바인딩해줍니다. 하지만 ES6 클래스의 출현으로 비추천.
render() 내에서 직접 바인딩 : 위의 예에서는
value={this.state.title} onChange={this.handleChangetitle.bind(this)}이렇게 사용하면 됩니다. 하지만 rendering을 할때마다 바인딩을 진행하게 되므로 성능에 영향을 미칩니다.
- 위와 비슷한 방법으로 arrow function을 사용하면 됩니다.
value={this.state.title} onChange={e => this.handleChangetitle(e)}- constructor에 바인딩 :
constructor(props) { super(props); this.handleChangetitle.bind(this) }이런식으로 constructor에 바인딩 하면 되겠네요!
- 클래스 속성에서 Arrow 함수 사용 : handler 함수를 arrow 함수로 바꿔주면 됩니다.
handleChangetext = (event) => { this.setState({text: event.target.text}); }
댓글 입력