0
새로운 반응이 있습니다. 나는 단지 코멘트 박스를 만들고 여러 코멘트를 포함하는 코멘트 보드를 만들려고 노력 중이다.루프에서 자식에게 전달 된 소품 기능을 호출 할 수 없습니다.
각 의견에는 하나의 inputbox, 버튼 (저장, 편집) 및 버튼 (제거)이 있습니다. 나는 component에 updateComment라는 이름의 보드에서 만든 함수를 소품으로 전달했습니다.
Now this.props.updateComment를 사용하여 부모 함수 updateComment를 호출 한 하위 함수 저장을 실행하려고하면 오류가 발생하여 정의되지 않은 속성을 읽을 수 없습니다.
stackoverflow에서 비슷한 질문을 검색했지만이 방법을 해결할 수 없습니다.
내 app.js 코드는 다음과 같습니다.
import React from 'react';
import { Home } from './home.jsx';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Board />
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
comments:[
"My name is brijesh",
"My name is santosh",
"My name is manoj"
]}
};
removeComment(i) {
console.log("going to remove element i",i);
var arr = this.state.comments;
arr.splice(i,1);
this.setState({comments:arr});
};
updateComment(newComment, i) {
var arr = this.state.comments;
arr[i] = newComment;
this.setState({comments:arr});
};
render() {
return (
<div className="board">
{
this.state.comments.map(function(text,i) {
return (
<Comment key ={i} index = {i}
updateComment={() => {this.updateComment}}
removeComment={() => {this.removeComment}}>
{text}
</Comment>
)
})
}
</div>
)
}
}
class Comment extends React.Component {
constructor(props) {
super(props);
this.state = {
edit: false
};
};
edit(){
this.setState({edit:true});
console.log("you clickced on edit0");
};
save(){
this.setState({edit:false});
var newText = this.refs.newText.value;
this.props.updateComment(newText, this.props.index);
console.log("you clickced on edit0",newText);
};
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
if(this.state.edit) {
return (
<div>
<div className="comment">
<input type="text" ref="newText" defaultValue={this.props.children} onChange={ this.handleChange.bind(this) } />
<button onClick={this.save.bind(this)}>Save</button>
</div>
</div>
)
}
else {
return (
<div>
<div className="comment">
<div>{ this.props.children }</div>
<button onClick={this.edit.bind(this)}>Edit</button>
</div>
</div>
)
}
}
}
export default App
내 main.js는 다음과 같습니다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
(< App/>), document.getElementById('app'));
나는 또한 피들을 만들었습니다. 그것은 "이"당신이 그렇게 생성자에서 그 바인딩을 수행 할 수 있습니다
render() {
return (
<div className="board">
{
this.state.comments.map(function(text,i) {
return (
<Comment key ={i} index = {i}
updateComment={this.updateComment.bind(this)}
removeComment={this.removeComment.bind(this)}>
{text}
</Comment>
)
})
}
</div>
)
}
주 무엇인지 알 수 있도록
https://jsfiddle.net/aubrijesh/k3h2pcnj/#&togetherjs=uEI7TFnJD1
답장을 보내 주셔서 감사합니다. @LPL,하지만 동일한 오류가 발생했습니다. "저장되지 않은"updateComment '속성을 읽을 수 없습니다. 저장 단추를 클릭하십시오. 전체 코드도 업데이트했습니다. –
@BrijeshVishwakarma 새 코드를 보여줄 수 있습니까? 제출 한 코드 스 니펫을 실행했는지 알 수 있듯이 저장시 오류가 없으므로 업데이트를 보지 않으면 도움이되지 않습니다. – LPL
위의 업데이트 코드가 있습니다. –