ReactJS テーブル

この章では、Reactでフォームを使用する方法を学びます。

簡単な例

以下の例では、設定入力フォームを使用します。value = {this.state.data}。入力値が変更されるときはいつでも状態を更新できます。以下の例では、設定入力フォームを使用します。onChangeイベントを監視し、状態を更新するためのフォームを使用します。

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(e)　{
　　　　　　this.setState({data:　e.target.value});
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<input　type　=　"text"　value　=　{this.state.data}　
　　　　　　　　　　　　　　　onChange　=　{this.updateState}　/>
　　　　　　　　　　　　<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'));

入力テキストの値が変更された場合、状態が更新されます。

複雑な例

以下の例では、子コンポーネント内のフォームの使用方法を見てみましょう。onChangeメソッドが状態の更新をトリガーし、その状態の更新が子の入力に渡されますvalueを表示します。イベントの章では同様の例が使用されています。子コンポーネントから状態を更新する必要があるたびに、update（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(e)　{
　　　　　　this.setState({data:　e.target.value});
　　　}
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<Content　myDataProp　=　{this.state.data}　
　　　　　　　　　　　　　　　updateStateProp　=　{this.updateState}</Content>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
class　Content　extends　React.Component　{
　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<input　type　=　"text"　value　=　{this.props.myDataProp}　
　　　　　　　　　　　　　　　onChange　=　{this.props.updateStateProp}　/>
　　　　　　　　　　　　<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'));

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