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