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

我没有发现魔族文档中的父/子组件交互的一个例子，我没有经验在React中，我觉得我可以从React应用获得答案，但暂时没有得到答案。

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

Answer 1

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