Передача данных в родительский компонент

Question

Я застрял в моем простом приложении infernojs v1.2.2 для передачи данных в родительский компонент, эта проблема может быть связана с машинописным текстом, потому что я получил ошибку для машинописного текста, которой нет (он имеет функцию распознавания реквизитов из родительского компонента).

Я пытаюсь вызвать обратный вызов для моего дочернего компонента, чтобы вызвать его позже, но у меня плохой контекст. Работа вокруг меня заставила меня даже не запускать onInput.

Вот мой родительский компонент

import { linkEvent } from 'inferno';
import Component from 'inferno-component';


import Weight from './weight';

export class RatioAlcohol extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
         this.state = { weight: 65 };
    }
    setChangeWeight(instance, event) {
        instance.setState({ weight: event.target.value });
    }
    render(props){
        return (
                <div className="ratio-alcohol">
                    <Weight valueChanged={ linkEvent(this, this.setChangeWeight) } weight={ this.state.weight } />
                </div>
        );
    }
}

и там мой дочерний компонент:

import { linkEvent } from 'inferno';
import Component from 'inferno-component';

export default class Weight extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
        this.state = { weight: props.weight};
    }
    handleChangeWeight(instance, event) {
        instance.valueChanged.event();
    }
    render(props){
        return (
                <div className="weight">
                    <label for="WeightInput">What is your weight(Kg)?</label>
                    <input id="WeightInput" name="weight" type="number" value={ props.weight } onInput={ linkEvent(props, this.handleChangeWeight) } />
                </div>
        );
    }
}

Я не нашел пример взаимодействия родительских и дочерних компонентов в документации по Inferno, и у меня нет опыта работы с React, я чувствую, что могу получить ответ из приложения React, но пока не получил его.

Я использовал inferno-typcript-example в качестве основы для своего проекта, я не знаю, имеет ли это отношение к этой проблеме.

Answer 1

Итак handleChangeWeight подпись функции в Weight имеет 1-й параметр, например, это на самом деле ваш компонент props, Это должно быть что-то вроде

export default class Weight extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
        this.state = { weight: props.weight};
    }
    handleChangeWeight(props, event) {
        props.valueChanged(event);
    }
    render(props){
        return (
                <div className="weight">
                    <label for="WeightInput">What is your weight(Kg)?</label>
                    <input id="WeightInput" name="weight" type="number" value={ props.weight } onInput={ linkEvent(props, this.handleChangeWeight) } />
                </div>
        );
    }
}

и в RatioAlcohol вам не нужно связывать событие, скорее, если вам нужен доступ к экземпляру, вы должны связать свой обработчик

export class RatioAlcohol extends Component<Props, any> {
    constructor(props, context) {
        super(props, context);
        this.state = { weight: 65 };
        this.setChangeWeight = this.setChangeWeight.bind(this)
    }
    setChangeWeight(event) {
        this.setState({ weight: event.target.value });
    }
    render(props){
        return (
                <div className="ratio-alcohol">
                    <Weight valueChanged={ this.setChangeWeight } weight={ this.state.weight } />
                </div>
        );
    }
}