如何將更改事件傳播到組件層次結構react.js？

我想通過擴展material-ui文本字段來創建數字輸入字段。爲此，我需要驗證輸入值並停止無效值的傳播。如果輸入有效，我希望頂層容器組件處理更改事件。但是，如果我爲控件提供事件處理程序，它不會冒泡到容器組件。我怎樣才能做到這一點？如何將更改事件傳播到組件層次結構react.js？

這裏是我的代碼 -

我的容器組件 -

class ItemsContainer extends Component { 

    handleItemChange(e) 
    { 
    console.log(e.target.value) 
    //dispatch further redux action 
    } 

    render() 
    { 
     const cartTable =() => <ItemTable lines = { this.props.Lines } 
         onItemChange = { this.handleItemChange.bind(this) } /> 
     return({cartTable }) 
    } 
}

無國籍表組件，用於數字輸入

const CartLineTable = ({ 
    lines, 
    onItemChange =() => {}, 
}) => { 
    let rows = cartLines.map((cl, k) => <NumberField 
     id = { `${k}` } 
      color = 'primary' 
      defaultValue = { cl.value } 
      onChange = { (e) => onItemChange(e, k, cl) }/> ) 

return ({rows }) 
}

文本控制

import React, { Component } from 'react' 
import TextField from 'material-ui/TextField' 

class NumberFieldBehavior extends React.Component { 
    handleChange() { 
    console.log('change fired!', arguments) 
    //fire the parent components event handler ? 
    } 
} 

class NumberField extends NumberFieldBehavior { 
    render() { 

    return(
     <TextField {...this.props} onChange = {this.handleChange.bind(this)}/> 
    ) 
    } 
} 

export default NumberField

來源

2016-07-22 Akhil

您甲腎上腺素編輯爲您的NumberField組件添加onChange道具，並在調用TextField的onChange時調用傳遞給您的函數。

一個可能的實施冒泡：

class NumberField extends Component{ 
    onTextFieldChange(){ 
    //check condition for bubble up and then 
    this.props.onChange(anyArgsYouWantToPass); 
    } 
    render(){ 
    return(
     <TextField {...this.props} onChange={this.onTextFieldChange.bind(this)}/> 
    ) 
    } 
}

，並使用它像這樣： <NumberField onChange={functionToCallOnValidChange}/>

來源

2016-07-23 02:28:01 sasidhar

這工作，謝謝！ – Akhil

我無法傳遞額外的參數，任何想法？ – Akhil

在我給你的上面的例子中，你可以通過調用'this.props.onChange（arg1，arg2，...）' – sasidhar

如何將更改事件傳播到組件層次結構react.js？

回答

相關問題