フォーム処理の基本概念
フォーム処理では、ユーザーが入力したデータをサーバーに送信するためにイベントを処理し、必要に応じて入力内容をバリデーションすることが必要です。
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
);
}
}
フォームイベントとバインディング
フォームでのユーザー入力を処理するためには、入力フィールドの値を追跡し、適切なイベントをバインドする必要があります。
class EmailForm extends React.Component {
constructor(props) {
super(props);
this.state = { email: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ email: event.target.value });
}
handleSubmit(event) {
alert('Email submitted: ' + this.state.email);
event.preventDefault();
}
render() {
return (
);
}
}
React.jsでのフォームバリデーション
フォームにバリデーションを追加して、入力データが適切かどうかをチェックしましょう。以下は、メールアドレスの形式をバリデーションする例です。
class ValidationForm extends React.Component {
constructor(props) {
super(props);
this.state = { email: '', error: null };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const email = event.target.value;
let error = null;
if (!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/)) {
error = 'Invalid email address';
}
this.setState({ email, error });
}
handleSubmit(event) {
event.preventDefault();
if (!this.state.error) {
alert('Form submitted');
}
}
render() {
return (
);
}
}
React.jsでフォームを作成する方法：ステップバイステップガイドのまとめ
この記事では、React.jsでフォームを作成する方法を学びました。フォームの基本的な作成から、入力データの処理、バリデーションの追加までを解説しました。React.jsを使って効率的にフォームを実装し、ユーザーの入力を適切に管理しましょう。
