1

Учу React.

Есть два компонента, MainComponent и вложенный в него Child .... как вывести в главном компоненте, данные из вложенного?

import .......;

class MainComponent extends Component {
    state = {
        mainValue: 'mainValue'       
    };

    outValues() {
        let inputName = this.inputName.value;

        let inputChild = ???????? ;

        console.log('ЗНАЧЕНИЕ КОМПОНЕНТА input:', inputName);
        console.log('ЗНАЧЕНИЕ параметра value компонента Child :',  ??????? );
        console.log('ЗНАЧЕНИЕ поля Child.valueAAAA компонента Child :',  ???????  );
        console.log('ЗНАЧЕНИЕ state.valueBBBB компонента Child :',  ???????  );
    }

    render() {
        return (
            <div>
                name:
                <input type="text" ref={(input) => {this.inputName = input}}/>

                <Child  ref={/* что писать сюда чтобы */} value="значение_А" onValue={this.onValueOrderStatusSelect.bind(this)}/>

                <button onClick={this.outValues.bind(this)}> TEST </button>
            </div>
        );
    }

    onValueCategorySelect(e) {       
        this.setState({mainValue: e.target.value});
    }   
}

и

class Child extends Component {
    state = ({
        valueBBBB: 'значение_valueBBBB'
    })

    valueAAAA = 'значение_valueAAAA';

    render() {
        let options = [];
        let name = "id";
        this.props
            .categories
            .forEach((category,index) => {
                options.push(
                    <option key={index} value={JSON.stringify(category)}>{category[name]}</option>                
                )
            })
        return (
            <div>
                <select value={this.state.value} onChange={this.props.onValue}>
                    {options}
                </select>
            </div>
        );
    }       
}

1 ответ 1

1

Добрый день! Можно сделать это так:

<Component
 ref={(child) => { this._component = child; }}
/>

В самом компоненте нужен метод:

getData() {
  let dataToReturn;
  dataToReturn = что_хотите_вернуть_из_компонента;
  return dataToReturn;
}

и указать в connect { withRef: true }, примерно так:

export default connect(mapStateToProps, mapDispatchToProps, null,  { withRef: true })(component)

Теперь все, что вы возвращаете из компонента доступно в родителе таким образом:

let componentData = this._component.getWrappedInstance().getData();

Но тут стоит остановиться и подумать над архитектурой вашего приложения. Все-таки лучше передавать значения изменяя стейт в сторе с помощью экшнов, тогда поведение в целом будет более предсказуемым.

Ваш ответ

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

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