только начал знакомиться с ReactJS. Такая проблема, хочу связать родительский компонент с дочерним, а именно передать через свойства две функции дочернему.
Передаю функции так:
class TasksWrapper extends React.Component {
constructor(props) {
super(props);
this.state = { //create the array state with tasks
tasks: [
'Cleen teeth!',
'Finith the project',
'Sleep'
]
};
//bind some functions for this component events
this.deleteTask = this.deleteTask.bind(this);
this.updateTask = this.updateTask.bind(this);
};
//delete task item
deleteTask = (index) => {
var tasksArray = this.state.tasks; //tasks array
tasksArray.splice(index, 1); //remove one item from tasks array from index
this.setState({ tasks: tasksArray }); //update tasks state array with new tasks array
};
//save changes in the task
updateTask = (text, index) => {
var tasksArray = this.state.tasks; //tasks array
tasksArray[index] = text; //set new text to the tasks array
this.setState({ tasks: tasksArray }); //update tasks state array with new tasks array
};
//render all tasks in the tasks wrapper
render() {
return (
<div className="tasks-wrapper">
{
this.state.tasks.map(function(task, item) {
return (
<Task index={ item } key={ item } text={ task } updateTask={ this.updateTask } deleteTask={ this.deleteTask } />
);
})
}
</div>
);
};
};
И принимаю:
class Task extends React.Component {
constructor(props) {
super(props);
this.state = {
edit: false //initialize editing state as false for default
};
//bind edit and save actions for this component
this.edit = this.edit.bind(this);
this.save = this.save.bind(this);
};
//set editing state on true when user is editing the task
edit() { this.setState({ edit: true }); };
//call deleteTask function from the Task props
delete() { this.props.deleteTask(this.props.index); };
save() {
//when user saving, take his text value from textarea with reference "saveTxt"
var textValue = this.refs.saveTxt.value;
this.setState({ edit: false }); //and init edit state at false
//call updateTask function from the Task props with the users new text and task index
this.props.updateTask(textValue, this.props.index);
};
//default task preview
renderDefault() {
return (
<div className="task-box">
<div className="task-box__text">{ this.props.text }</div>
<div className="task-box__footer">
<div className="task-box__button-set">
<button onClick={ this.edit } className="task-box__button edit-button">Edit</button>
<button onClick={ this.delete } className="task-box__button delete-button">Delete</button>
</div>
</div>
</div>
);
};
//editing task preview
renderEditing() {
return (
<div className="task-box">
<textarea ref="saveTxt" defaultValue={ this.props.text }></textarea>
<div className="task-box__footer">
<div className="task-box__button-set task-box__save-buttonset">
<button onClick={ this.save } className="task-box__button save-button">Save</button>
</div>
</div>
</div>
);
};
render() {
if (this.state.edit) return this.renderEditing();
else return this.renderDefault();
};
};
Так вот получаю следующую ошибку:
TypeError: Cannot read property 'updateTask' of undefined
В родительском конструкторе указал бинды для функций:
this.deleteTask = this.deleteTask.bind(this);
this.updateTask = this.updateTask.bind(this);
Также в примере использовал стрелочные функции но ничего не помогает. Кто знает в чем ошибка? Буду благодарен за помощь. Спасибо.