0

только начал знакомиться с 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);

Также в примере использовал стрелочные функции но ничего не помогает. Кто знает в чем ошибка? Буду благодарен за помощь. Спасибо.

1 ответ 1

0

Задачу решил следующим образом (кому интересно или актуально) :

returnTasks = (task, item) => {
        return (
            <Task index={ item } key={ item } text={ task } updateTask={ this.updateTask } deleteTask={ this.deleteTask } />
        );
    }

    //render all tasks in the tasks wrapper
    render() {
        return (
            <div className="tasks-wrapper">
                {
                    this.state.tasks.map(this.returnTasks)
                }
            </div>
        );
    };

Сделал отдельную стрелочную функцию для вывода каждого компонента, и в цикле её вызвал

1
  • renderEditing достаточно было забиндить... Биндить контекст у стрелочных функции бесполезно, у них его нет. И в целом много ошибок, таких как "Мутация стейта напрямую"
    – DiDex
    25 ноя 2018 в 14:47

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.