2
반응이 새로 생기고 jquery를 사용하여 ul에 li를 동적으로 추가하려고합니다. 내 안쪽에 나는 onclick 방법으로 sapn을 가지고있다. 스팬을 클릭하면 특정 메서드가 실행되기를 원하지만 얻을 수 있습니다. - 잡히지 않은 ReferenceError : deleteMsg가 HTMLSpanElement.onclick에 정의되어 있지 않습니다. 나는 해결책을 찾았지만 아무 것도 효과가 없었다. 나는 Jquery onClick 함수가 React에서 정의되지 않았습니다.
이
내 코드는 ... 문제가 무엇인지 이해가 안 :class CoachPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state={
val: []
}
}
handleSend(msg){
this.state.val.push(msg);
this.setState({val: []});
}
// get all data from db and put in the list
componentWillMount(){
fetch('http://localhost:3003/api/msgs/')
.then(function(res) {
return res.json();
}).then(function(data){
var msgs = [data];
msgs[0].map(function(msg){
console.log(msg.msgdata);
//Here i add the li's with a sapn and onclick method called "deleteMsg"
$('#coach-panel-content').append(
(`<li class=myli>${msg.msgdata}<span onclick=deleteMsg('${msg._id}')>X</span></li><hr>`));
})
})
.catch(function(error) {
console.log(error)
});
}
deleteMsg(item){
return fetch('http://localhost:3003/api/msgs/' + item, {
method: 'delete'
}).then(response =>
response.json().then(json => {
return json;
})
);
}
render() {
return (
<div className="container" style={{color: '#FFF', textAlign: 'right'}}>
<h1>Coach Page</h1>
<AddMsg onSend={this.handleSend.bind(this)} />
<Panel header="עדכונים" bsStyle="info" style={{float: 'left', textAlign: 'right', width: '40em'}}>
<ul id="coach-panel-content">
</ul>
</Panel>
</div>
);
}
}
export default CoachPage;
UPDATE : vasas 말했다 내가하지 않았다 @sandor 나는 모든 변경을
지금까지 주목했지만 새로운 msg를 추가하려고 할 때이 오류가 발생합니다 : "잡히지 않은 ReferenceError : val이 정의되지 않았습니다". 나는 그런 일이 왜 이해가 잘 모르겠어요 .. 이 내 업데이트 된 코드는 다음과 같습니다
class CoachPage extends React.Component {
constructor(props, context) {
super(props, context);
this.state={
val: []
}
}
handleSend(msg){
this.state.val.push(msg);
this.setState({val});
}
// get all data from db and put in the list
componentDidMount(){
fetch('http://localhost:3003/api/msgs/')
.then(res => res.json())
.then(data => this.setState({ val: data }))
.catch(console.error);
}
deleteMsg(item){
return fetch('http://localhost:3003/api/msgs/' + item, {
method: 'DELETE'
}).then(response =>
response.json()
.then(json => {
return json;
})
);
}
render() {
return (
<div className="container" style={{color: '#FFF', textAlign: 'right'}}>
<h1>Coach Page</h1>
<AddMsg onSend={this.handleSend.bind(this)}/>
<Panel header="עדכונים" bsStyle="info" style={{float: 'left', textAlign: 'right', width: '40em'}}>
<ul id="coach-panel-content">
{
this.state.val.map((msg, index) =>
<li key={index} className='myli'>
{msg.msgdata}
<span onClick={() => this.deleteMsg(msg._id)}>X</span>
<hr/>
</li>
)
}
</ul>
</Panel>
</div>
);
}
}
export default CoachPage;