Wie wird das Änderungsereignis in der Komponentenhierarchie react.js weitergegeben?

Question

Ich versuche ein Nummernfeld zu erstellen, indem ich das Material-ui-Textfeld erweitere. Zu diesem Zweck muss ich die Eingabewerte validieren und die Propagierung für ungültige Werte stoppen. Ich möchte, dass die oberste Containerkomponente das Änderungsereignis behandelt, wenn die Eingabe gültig ist. Wenn ich jedoch einen Event-Handler für das Steuerelement bereitstelle, sprudelt es nicht bis zur Container-Komponente. Wie kann ich das erreichen?

Hier ist mein Code -

Mein Container-Komponente -

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

Stateless Tabellenkomponente

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

Text Steuerung für Zahleneingaben

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 

Answer 1

Du hast ne ed, um eine onChange Requisiten zu Ihrem NumberField Komponente hinzufügen und rufen Sie die Funktion an Sie weitergegeben, wenn die TextFieldonChange aufgerufen wird.

Eine mögliche Implementierung für sprudeln:

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

und es wie folgt verwendet werden: <NumberField onChange={functionToCallOnValidChange}/>