0

Требуется решить следующую задачу с использованием React:

  1. Есть компонент <Field onUpdateValues={this.updateValues}>
  2. Есть компонент <Tree>.
  3. Компонент <Tree> всегда содержит <Field>. Из компонентов <Tree> рекурсивно строится дерево.
  4. И есть главный <div> - контейнер , с которого начинается отрисовка <Tree>.

Вопрос: как передать значение параметра из каждого Field до главного контейнера? Field, Tree - их может быть куча, т.к. дерево.

Из Field в Tree значение у меня получается передавать, типа так:

В родительском Tree:

    updateValues(id) {
            console.log('TADA' + id);
        }

<Field onUpdateValues={this.updateValues}></Field >

В дочернем Field:

    this.props.onUpdateValues(this.state.id);

В кратце, узлы дерева все выводятся за раз, каждый узел дерева содержит Checkbox (находится в Field). И вот в родительском элементе мне надо получить json-список вида со всей информацией о Checkbox'ах в узлах:

{
    answer:[
        {
          id:1,
          checked:0
        },
        {
           id:2,
           checked:1
        }
    ]
}

1 ответ 1

0
  1. Пример передачи родителю от ребёнка через транзитный узел:
class Field extends React.Component {
    updated = () => {
        this.props.updated(100);
    }

    render() {
        return <input type="checkbox" value={100} onClick={this.updated}/>;
    }
}

class Tree extends React.Component {
    render() {
        return <Field updated={this.props.updated} />;
    }
}

class Div extends React.Component {
    updated = (id) => {
        alert(id);
    }

    render() {
        return <Tree updated={this.updated}/>
    );
}

ReactDOM.render(
    <Div/>,
    document.getElementById('container')
);
  1. Состояние хранить в Div.

  2. Примеры:

а) Пример с Div, Tree, Field: https://jsfiddle.net/zsqwL40b/

б) + сохранение в JSON: https://jsfiddle.net/j6scy02b/3/

2
  • Большое спасибо! То что нужно 1 в 1, решил проблему.
    – Alex
    28 сен 2019 в 14:59
  • @Alex Отлично! Рад, что удалось помочь. 28 сен 2019 в 16:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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