Learn TypeScript 3 by Building Web Applications

Emitting and handling events

Communication between React components is of course not limited to components passing props to their children. Child components can also emit events for their ancestors to handle.

In the previous examples, we have already seen how to define callback functions to react to events.

Let's look again at the code of the Calculator component:

render() { 
    return ( 
       ... 
       <button onClick={() => this.add(1)}>+1</button> 
       ... 
    ); 
} 
 
add(value) { 
    this.setState((state, props) => { 
        return {currentResult: state.currentResult + value} 
    }); 
} 

In this example, the component associates the click event of the button child component to a local function. So, we already know how a parent can listen and react to events emitted by its children. ...