はTypeError：私のボタンについては、以下の2のエラーを取得し、私は続ける未定義

Question

のプロパティ[編集]を読み取ることができません：私はToDoリストを構築してい

TypeError: Cannot read property 'edit' of undefined 

TypeError: Cannot read property 'remove' of undefined 

を、各ノートには、2つのボタンの追加」と「削除」を持っています。 DisplayNoteを一度呼び出すと、メモボタンが機能するようになりました。 JSマップで複数の音符を作成しようとすると、ボタンが機能しなくなり、なぜ今は動作しないのかわかりません。コードが添付されています。

import React from 'react'; 
 

 
class DisplayNote extends React.Component { 
 
\t handleEdit(e) { 
 
\t \t console.log('sdfsdfdfs'); 
 
\t \t this.props.edit(e) 
 
\t } 
 
\t handleRemove(e) { 
 
\t \t console.log('sdfsdfdfs'); 
 
\t \t this.props.remove(e) 
 
\t } 
 

 
\t render(){ 
 
\t \t return(
 
\t \t \t <div className="note"> 
 
\t \t \t \t <p>{this.props.note}</p> 
 
\t \t \t \t <span> 
 
\t \t \t \t \t <button onClick={this.handleEdit.bind(this)}>Edit</button> 
 
\t \t \t \t </span> 
 
\t \t \t \t <span> 
 
\t \t \t \t \t <button onClick={this.handleRemove.bind(this)}>Remove</button> 
 
\t \t \t \t </span> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 
class EditNote extends React.Component { 
 
\t handleSave(e) { 
 
\t \t var val = this.refs.newText.value; 
 
\t \t this.props.saveNote(val) 
 
\t } 
 
\t render(){ 
 
\t \t return (
 
\t \t \t <div className="note"> 
 
\t \t \t \t <textarea ref="newText" defaultValue="test"> 
 
\t \t \t \t </textarea> 
 
\t \t \t \t <button onClick={this.handleSave.bind(this)}>Save</button> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 
class App extends React.Component { 
 
\t constructor(props) { 
 
\t \t super(props); 
 

 
\t \t this.edit = this.edit.bind(this); 
 
\t \t this.saveNote = this.saveNote.bind(this); 
 
\t \t this.remove = this.remove.bind(this); 
 

 
\t \t this.state = { 
 
\t \t \t editing: false, 
 
\t \t \t notes: ['Call Tim','sdsdsd', 'dentist', 'Email Julie'] 
 
\t \t } 
 
\t } 
 

 
\t AppObject = { 
 
\t \t count: 1, 
 
\t \t price: 15.00, 
 
\t \t amount: '12' 
 
\t } 
 

 
\t AppArray = ['tim','ali', 'jim', 'tom'] 
 

 
\t edit(e) { 
 
\t \t this.setState({editing: true}); 
 
\t \t console.log('AppObject', this.AppObject); 
 
\t } 
 

 
\t saveNote(val) { 
 
\t \t this.setState({editing: false}); 
 
\t \t console.log('Save note value ' + val) 
 
\t } 
 

 
\t remove() { 
 
\t \t alert('remove'); 
 
\t \t console.log('AppArray', this.AppArray); 
 
\t } 
 

 
\t eachNote(note, i) { 
 
\t \t return(
 
\t \t \t <DisplayNote key={i} 
 
\t \t \t \t \t \t note={note} 
 
\t \t \t \t \t \t edit={(e) => this.edit(e)} 
 
\t \t \t \t \t \t remove={(e) => this.remove(e)}> 
 
\t \t \t \t \t \t {note} 
 
\t \t \t </DisplayNote> 
 
\t \t); 
 
\t } 
 

 
\t render() { 
 
\t \t if(this.state.editing) { 
 
\t \t \t return (
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t <EditNote saveNote={(e) => this.saveNote(e)} /> 
 
\t \t \t \t \t \t <div>{this.props.count}</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t); 
 
\t \t }else{ 
 
\t \t \t return (
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t /* Calling it once*/<DisplayNote edit={(e) => this.edit(e)} remove={(e) => this.remove(e)} /> 
 
\t \t \t \t \t \t <div>{this.props.count}</div> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t \t /* Using map to create multiple notes */{this.state.notes.map(this.eachNote)} 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t); 
 
\t \t } 
 

 
\t } 
 
} 
 

 
App.propTypes = { 
 
\t count: function(props, propName){ 
 
\t \t if(typeof props[propName] !== 'number'){ 
 
\t \t \t return new Error('Count prop must be a number'); 
 
\t \t } 
 
\t \t if(props[propName] > 100){ 
 
\t \t \t return new Error('Creating ' + props[propName] + ' notes is too much!'); 
 
\t \t } 
 
\t } 
 
} 
 

 
export default App;

Answer 1

todo list image

は、私はあなたにもそのためのbindingを定義する必要があり、あなたがcontextmap内部の機能を失うされていると思います。

使用constructorにこの行は、それがされますbindfunctionこと：使用

this.eachNote = this.eachNote.bind(this); 

か、そのfunction次のように：

{this.state.notes.map((note, i) => this.eachNote(note,i)} 

それとも

{this.state.notes.map(this.eachNote)} 

eachNote = (note, i) => { //use arrow function here 

}