ReactJS イベント

この章では、イベントの使用方法を学びます。

簡単な例

これは非常にシンプルな例であり、ここでは単一のコンポーネントのみを使用します。私たちは以下を追加しましたonClickイベント，updateStateボタンをクリックすると、イベントがトリガーされます。

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　
　　　　　　this.state　=　{
　　　　　　　　　data:　'Initial　data...'
　　　　　　}
　　　　　　this.updateState　=　this.updateState.bind(this);
　　　};
　　　updateState()　{
　　　　　　this.setState({data:　'Data　updated...'})
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<button　onClick　=　{this.updateState}>CLICK</button>
　　　　　　　　　　　　<h4{this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,	document.getElementById('app'));

これにより以下の結果が得られます。

子供の活動

私たちが必要なときにstate子コンポーネントから親コンポーネントに状態を更新する場合、親コンポーネントでイベントハンドラを生成することができます（updateState），それをpropとしてupdateStateProp）を子コンポーネントに渡し、ここで呼び出すことができます。

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{
　　　constructor(props)　{
　　　　　　super(props);
　　　　　　
　　　　　　this.state　=　{
　　　　　　　　　data:　'Initial　data...'
　　　　　　}
　　　　　　this.updateState　=　this.updateState.bind(this);
　　　};
　　　updateState()　{
　　　　　　this.setState({data:　'Data　updated　from　the　child　component...'})
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Content　myDataProp　=　{this.state.data}　
　　　　　　　　　　　　　　　updateStateProp　=　{this.updateState}</Content>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<button　onClick　=　{this.props.updateStateProp}>CLICK</button>
　　　　　　　　　　　　<h3>{this.props.myDataProp}</h3>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App/,	document.getElementById('app'));

これにより以下の結果が得られます。