1

我被困在我的简单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-typescript-example 作为我的项目的基础，我不知道它是否与该问题有关。

4

1 回答 1

2

所以handleChangeWeight函数签名Weight有第一个参数作为实例，它实际上是你组件的 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>
        );
    }
}

于 2017-02-10T03:42:46.983 回答