React フォームとイベント
この章では、React でフォームを使用する方法について説明します。
HTML フォーム要素は React の他の DOM 要素とは異なります。フォーム要素は本来、内部状態を保持するからです。
HTML では、<input>、<textarea>、<select> などのフォーム要素は自身の状態を維持し、ユーザーの入力に応じて更新されます。しかし React では、可変状態は通常コンポーネントの state プロパティに保存され、setState() メソッドでのみ更新できます。
簡単な例
この例では、入力ボックス input の値を設定します。value = {this.state.data}入力ボックスの値が変更されたときに state を更新できます。次のものを使用できます。onChangeイベントを使用して input の変更を監視し、state を変更します。
React 実例
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello サンプル!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
試してみる »
上記のコードは、値が Hello サンプル! の input 要素をレンダリングし、onChange イベントでユーザー入力の値を更新して応答します。
実例 2
次の例では、子コンポーネントでフォームを使用する方法を説明します。onChangeメソッドは state の更新をトリガーし、更新された値を子コンポーネントの入力ボックスのvaluevalue に渡して画面を再レンダリングします。
親コンポーネントでイベントハンドラ（handleChange）を作成し、prop（updateStateProp）として子コンポーネントに渡す必要があります。
React 実例
class Content extends React.Component {
render() {
return (
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>
);
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = { value: 'Hello サンプル!' };
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
var value = this.state.value;
return (
<div>
<Content myDataProp={value} updateStateProp={this.handleChange} />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<HelloMessage />);
試してみる »
Select ドロップダウンメニュー
React では、selected 属性を使用せず、ルートの select タグで value 属性を使用して選択項目を表します。
React 実例
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
お気に入りのウェブサイトを選択
<select value={this.state.value} onChange={this.handleChange}>
<option value="gg">Google</option>
<option value="rn">サンプル</option>
<option value="tb">Taobao</option>
<option value="fb">Facebook</option>
</select>
</label>
<input type="submit" value="送信" />
</form>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<FlavorForm />
);
試してみる »
複数のフォーム
複数の input 要素を処理する場合、各要素に name 属性を追加することで、処理関数がevent.target.nameの値に基づいて何を行うかを選択できます。
React 実例
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
return (
<form>
<label>
離れるかどうか:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
訪問者数:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
試してみる »
React イベント
次の例では、onClick イベントを使用してデータを変更する方法を示します。
React 実例
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello サンプル!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'サンプル'})
}
render() {
var value = this.state.value;
return <div>
<button onClick={this.handleChange}>クリック</button>
<h4>{value}</h4>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
試してみる »
子コンポーネントから親コンポーネントのstateを更新する必要がある場合、親コンポーネントでイベントハンドラ（handleChange）を作成し、prop（updateStateProp）として子コンポーネントに渡す必要があります。例は次のとおりです。
React 実例
class Content extends React.Component {
render() {
return <div>
<button onClick = {this.props.updateStateProp}>クリック</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
}
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Hello サンプル!'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: 'サンプル'})
}
render() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HelloMessage />
);
試してみる »