0
私は反応するのが新しいです。私は、複数のコメントを含むコメントボックスとコメントボードを作成しようとしています。ループ内の子に渡された小道具関数を呼び出せませんでした。
各コメントには、1つの入力ボックス、ボタン（保存、編集）とボタン（削除）があります。私は、コンポーネントに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
上記の更新コードがあります。 –