Как распространять событие изменения в иерархии компонентов react.js?

Question

Я пытаюсь создать поле ввода числа, расширив текстовое поле material-ui. Для этого мне нужно проверить входные значения и остановить распространение для недопустимых значений. Я хочу, чтобы верхний компонент контейнера обрабатывал событие изменения, если вход был действительным. Но, если я предоставляю обработчик события для элемента управления, он не пузырится до компонента контейнера. Как я могу это достичь?

Вот мой код -

Мой контейнер компонент -

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

Текст Stateless таблицы для числовых входов

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

Вы пе ed, чтобы добавить onChange реквизита к вашему NumberField Компонент и вызвать функцию, переданную вам при вызове 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}/>