How to Stop So Many Bubble Ups of Events in Reactjs? - reactjs

Question

due to certain factors(SalesForce) I am looking of only using reactjs and not something like redux.
I going to have something like this
<script type="text/babel">
class Main extends React.Component {
constructor() {
super();
this.state = {
items : [
{
year: 2016,
},
{
year: '',
},
]
};
}
componentDidMount() {
}
handleChange(event, index){
let items = this.state.items;
let item = items[index];
item[event.target.name] = event.target.value;
items[index] = item;
this.setState({ items: items});
}
render() {
return (
<div className="main">
{
this.state.items.map((item, i) => {
return <Item item={item} index={i} handleChange={(event,index) => this.handleChange(event,index)} />
})
}
</div>
)
}
}
class Item extends React.Component {
constructor() {
super();
}
componentDidMount() {
}
handleChange(event){
this.props.handleChange(event, this.props.index);
}
render() {
return (
<div className="item">
<Sub item={this.props.item} index={this.props.index} handleChange={(event) => this.handleChange(event)} />
</div>
)
}
}
class Sub extends React.Component {
constructor() {
super();
}
componentDidMount() {
}
handleChange(event) {
this.props.handleChange(event, this.props.index);
}
render() {
return (
<div className="container">
<div>
<label>Year </label>
<input type="text" name="year" value={asset.year} className={year} onChange={(event) => this.handleChange(event)}/>
</div>
</div>
)
}
}
ReactDOM.render(<Main />, document.getElementById("Container"));
</script>
I am wondering is there away so that when someone types something in "year" in sub component I don't have to have handleChange that goes up to the Item handleChange and finally to the Main handleChange.