Как передать состояния от дочернего компонента к родителю на чистом React JS?

Question

[Gorelov]

Здравствуй. Начал изучать React JS на примере реализации ToDo List-приложения. На данный момент реализовал возможность создания новых тасков и столкнулся с проблемой их удаления. Чтобы детально обрисовать суть проблемы, сначала приведу код где формируются сами таски.

class CreatorTasks extends Component {
    constructor(props) {
        super(props);

        this.createTask = this.createTask.bind(this);
        this.state = {
            components: [
            ]
        };
    }

    createTask() {        
        this.setState({
            components: this.state.components.concat([this.infoAboutTask()])
        });
        this.clearInputsAfterCreateTask();
    }

    infoAboutTask() {
        return {
            id: this.state.components.length + 1,
            taskName: document.getElementById('inputTaskName').value,
            taskDescription: document.getElementById('exampleFormControlTextarea1').value,
            taskImportance: document.getElementById('inputTaskImportance').value,
            taskFinishData: document.getElementById('inputFinishDate').value,
        };
    }

    clearInputsAfterCreateTask() {
        ['inputTaskName', 'exampleFormControlTextarea1', 'inputTaskImportance', 'inputFinishDate'].forEach((item) => document.getElementById(item).value = '');
    }

    render() {
        return (
            <div className="d-flex justify-content-between">
               // разметка
                <div className="newTask">
                    {
                        this.state.components.map((item) => (
                            <Task key={item.id} infoAboutTask={item} />
                        ))
                    }
                </div>
            </div>
        );
    }
}

Каждый таск формируется в зависимости от состояния меняющегося при нажатии на кнопку.
Мне кажется то, как я реализовал состояния в родительском компоненте не позволит адекватно удалить таски, может быть я и не прав. И все же главный вопрос - что я должен передать из дочернего компонента (компонента Task) в родительский, чтобы таск удалился.
Заранее спасибо )

Answer 1

[Антон Спирин]

Подход очень плохой. Писать так не надо. Для начала попробуйте изучить код типового Todo List на github и повторите. Думаю, после этого придет понимание почему и чем плох данный подход.
Давать рекомендации по данному куску === переписать весь код с нуля за вас.

Ключевые моменты:
1. Таски должны храниться в родительском компоненте.
2. В Task помимо задачи, надо передавать колбеки на изменение/удаление.
3. Никаких прямых обращений к DOM. Для решения вашей задачи даже без ref можно обойтись. Оперируйте состоянием.

Comments

[Gorelov]

Почему нельзя вынести их в отдельный компонент ? Или данный вопрос снова намекает на то, что так писать не надо и лучше посмотреть примеры на GitHub?

1. Таски должны храниться в родительском компоненте.

А можете пожалуйста кратко пояснить насчет прямых обращений к DOM. Скорее всего я неправильно понял, но вы подразумеваете возможность получения значения DOM-элемента также с помощью состояний ?

3. Никаких прямых обращений к DOM. Для решения вашей задачи даже без ref можно обойтись. Оперируйте состоянием.

[Антон Спирин]

Gorelov, вам тут вообще не надо получать DOM элементы, разве для формы добавления и редактирования можно использовать refs, но можно обойтись контролируемыми формами.

Примерно так может выглядеть ваш родительский компонент:

class TodoList extends Component {
  state = {
    tasks: [],
  };

  editTask = () => {
  };

  addTask = () => {
  };

  deleteTask = () => {
  };

  toggleTask = () => {
  };

  render() {
    return (
      <Wrapper>
        <List>
          {tasks.map(el => (
            <Task
              key={el.id}
              editTask={this.editTask}
              deleteTask={this.deleteTask}
              toggleTask={this.toggleTask}
            />
          )}
        </List>
        <AddTask addTask={this.addTask} />
     </Wrapper>
    )
  }
}

Изучайте примеры кода. Не беритесь писать самостоятельно пока не изучите хорошие примеры.

[Gorelov]

Благодарю за ответ.

[Антон Спирин]

Gorelov, изучайте, пробуйте и возвращайтесь если будут вопросы. Поможем.

Answer 2

[msdosx86]

Держи

Comments

[Gorelov]

Спасибо )

Answer 3

[Максим]

Глава "Взаимодействие из ребенка с родителем", если гитбук не работает - ссылка на пдф/епаб есть на хабре

Comments

[Gorelov]

Благодарю