Пытаюсь разобраться с React.
По клике на заголовок 'Header' (в компоненте Data) вызываю функцию обработчик handler() у родителя (компонента App), и хочу поменять у родителя state. Функция отрабатывает, но state не находится. Как можно привязать state к вызову?
class Data extends React.Component{
render(){
return(
<div>
<h1 onClick={this.props.data_function}>{this.props.data_text}</h1>
</div>
)
}
}
class App extends React.Component{
constructor(){
super();
this.state = {in: 'Header'}
}
handler(){
console.log('this.state.in', this.state.in);
//this.setState({in: 'New_Header'});
}
render(){
return(
<Data data_text={this.state.in} data_function={this.handler} />
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>