infernojs 将数据传递给父组件

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 app中得到答案，但暂时没有得到。

我使用 inferno-typescript-example 作为我项目的基础，我不知道它是否与那个问题有关。

Answer 1

所以 Weight 中的 handleChangeWeight 函数签名有第一个参数作为实例，它实际上是你的组件的 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 中你不必 link 事件，如果你需要访问实例，你必须绑定你的处理程序

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>
        );
    }
}

infernojs 将数据传递给父组件

infernojs pass data to parent component

typescript

infernojs