Reactstrapを使用してReactでフォームを作成する方法
序章
Reactstrap は、事前に構築されたBootstrap 4コンポーネントを提供し、非常に高い柔軟性と事前に構築された検証を可能にします。 これにより、印象的で直感的なユーザーエクスペリエンスを提供することが保証されている美しいフォームをすばやく作成できます。
このチュートリアルでは、Reactstrapを使用して、Reactアプリケーションでサインインフォームを作成します。
前提条件
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
- Reactにある程度精通している。 React.jsシリーズのコーディング方法を読むことができます。
- Bootstrap4にある程度精通している。 公式のBootstrap4.6ドキュメントを読むことができます。
このチュートリアルは、ノードv16.2.0、npm
v7.14.0、react
v17.0.2、reactstrap
v8.9.0、およびbootstrap
v4で検証されました。 6.0。
ステップ1—プロジェクトの設定
create-react-app を使用してReactアプリを生成し、依存関係をインストールすることから始めます。
- npx create-react-app reactstrap-example
新しいプロジェクトディレクトリに移動します。
- cd reactstrap-example
これで、Reactアプリケーションを実行できます。
- npm start
プロジェクトのエラーや問題を修正します。 そして、Webブラウザでlocalhost:3000
にアクセスします。
動作するReactアプリケーションができたら、reactstrap
をインストールできます。
- npm install reactstrap@8.9.0
次に、bootstrap
をインストールできます。
- npm install bootstrap@4
注: Reactstrapを使用する場合は、互換性のあるバージョンがインストールされるように、Bootstrapの4.xバージョンを指定することが重要です。 バージョンを指定しないと、現在5.xである最新バージョンのBootstrapがインストールされます。
次に、コードエディタでsrc/index.js
ファイルを開きます。 プロジェクトでブートストラップスタイルを使用するには、次の行を追加します。
import 'bootstrap/dist/css/bootstrap.min.css';
この時点で、ReactstrapとBootstrapの依存関係を持つ新しいReactアプリケーションが作成されます。
ステップ2—フォームコンポーネントの使用
Reactstrapを使用すると、標準のテキストInput
からより高度なファイルアップロードInput
まで、あらゆるものを含むForm
コンポーネントを事前に構築できます。
まず、reactstrap
からComponents
をインポートします。 この例では、Button
、Form
、FormGroup
、Input
、およびLabel
をインポートして、サインインで直接使用します。形。
import {
Button,
Form,
FormGroup,
Input,
Label
} from 'reactstrap';
必要なコンポーネントが揃ったので、フォームを作成しましょう。
Reactstrapは、type
、name
、id
、placeholder
などのprops
を取り込みます。
type
は、ファイルのアップロード、ラジオボタン、または電子メールなどのさらに具体的なテキスト入力などの入力の種類を定義します。name
は、最終的にバックエンドに送信されるキーと値のペアのキーです。id
は、DOMを操作するときに使用するものです。placeholder
を使用すると、入力にサンプルテキストを追加できます。
コードエディタでApp.js
を開き、次のコード行を追加します。
import { Component } from 'react';
import {
Button,
Form,
FormGroup,
Input,
Label
} from 'reactstrap';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h2>Sign In</h2>
<Form className="form">
<FormGroup>
<Label for="exampleEmail">Username</Label>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="[email protected]"
/>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="********"
/>
</FormGroup>
<Button>Submit</Button>
</Form>
</div>
);
}
export default App;
次に、コードエディタでApp.css
を開き、次のスタイルに置き換えます。
.App {
border: 2px solid #d3d3d3;
border-radius: .5em;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
padding: 1em;
text-align: left;
width: 600px;
}
.form {
padding: 1em;
}
label {
font-weight: 600;
}
変更を保存し、Webブラウザでアプリケーションを確認します。
Reactstrapは、フォームコンポーネントのスタイルを設定するための複数の組み込みの方法を提供します。 役立つ可能性のある重要な項目のいくつかを次に示します。
- 色:Reactstrapは、
has-success
のようなclassName
を使用する場合、Bootstrapの組み込み色をサポートします。 - インラインフォーム:
<Form>
内に、<Form inline>
を追加して、Label
とInput
を同じ行に配置できます。 - コンテナ、行、および列:
<Col>
は、Bootstrapの列に対するReactstrapのラッパーです。 これにより、デスクトップだけでなく、モバイルやタブレットにもフォーマットできます。
この時点で、Bootstrapスタイルを使用したサインインフォームを備えたReactアプリケーションができました。
ステップ3—検証とユーザーヒントの追加
FormText
を使用すると、フィールドの上または下にインジケーターテキストを追加できます。
この例では、「ユーザー名」フィールドは電子メールアドレスの形式の値を期待します。 FormText
が追加され、期待値をユーザーに通知します。
<FormText>Your username is most likely your email.</FormText>
変更を保存し、Webブラウザでアプリケーションを確認します。
この例にFormFeedback
を追加する前に、状態を管理する必要があります。
constructor(props) {
super(props);
this.state = {
email: '',
validate: {
emailState: '',
},
};
}
render() {
const { email } = this.state;
// ...
}
そして、フォームへの変更を処理します。
constructor(props) {
super(props);
// ...
this.handleChange = this.handleChange.bind(this);
}
handleChange = (event) => {
const { target } = event;
const value = target.type === 'checkbox' ? target.checked : target.value;
const { name } = target;
this.setState({
[name]: value,
});
};
FormFeedback
はフィールドを即座に検証します。 入力検証をカスタマイズする柔軟性があります。 onChange
イベントで電子メールを検証するための正規表現を使用して関数を追加し、has-success
またはhas-danger
を状態に設定します。
validateEmail(e) {
const emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const { validate } = this.state;
if (emailRegex.test(e.target.value)) {
validate.emailState = 'has-success';
} else {
validate.emailState = 'has-danger';
}
this.setState({ validate });
}
警告:電子メールアドレスを検証するための標準仕様があります。 この簡略化された正規表現は、チュートリアルの目的でのみ提供されています。
これをInput
に適用するには、valid
プロップを条件付きで追加します。
valid={ this.state.validate.emailState === 'has-success' }
そして、invalid
プロップと条件付き:
invalid={ this.state.validate.emailState === 'has-danger' }
/>
FormFeedback
を作成して、デフォルトで失敗テキストを表示します。
<FormFeedback>
Uh oh! Looks like there is an issue with your email. Please input a correct email.
</FormFeedback>
valid
プロップを使用して2番目のFormFeedback
を作成し、成功テキストを表示します。
<FormFeedback valid>
That's a tasty looking email you've got there.
</FormFeedback>
次に、value
、validateEmail
、およびhandleChange
をInput
に追加します。
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="[email protected]"
valid={ this.state.validate.emailState === 'has-success' }
invalid={ this.state.validate.emailState === 'has-danger' }
value={ email }
onChange={ (e) => {
this.validateEmail(e);
this.handleChange(e);
} }
/>
ユーザーがユーザー名を間違って入力すると、has-danger
スタイルのフィードバックが表示されます。
また、ユーザー名を正しく入力すると、ユーザーはhas-success
スタイルでフィードバックを受け取ります。
これで、フォームはFormText
、FormFeedback
、および検証を使用します。
ステップ4—フォームを送信する
最後に、送信時に通常はデータベースにデータを送信しますが、この例では、submitForm
関数を使用して電子メールをコンソールログに記録します。
submitForm(e) {
e.preventDefault();
console.log(`Email: ${ this.state.email }`);
}
すべての部品が配置されると、App.js
は次のようになります。
import { Component } from 'react';
import {
Form,
FormFeedback,
FormGroup,
FormText,
Label,
Input,
Button,
} from 'reactstrap';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
validate: {
emailState: '',
},
};
this.handleChange = this.handleChange.bind(this);
}
handleChange = (event) => {
const { target } = event;
const value = target.type === 'checkbox' ? target.checked : target.value;
const { name } = target;
this.setState({
[name]: value,
});
};
validateEmail(e) {
const emailRex =
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const { validate } = this.state;
if (emailRex.test(e.target.value)) {
validate.emailState = 'has-success';
} else {
validate.emailState = 'has-danger';
}
this.setState({ validate });
}
submitForm(e) {
e.preventDefault();
console.log(`Email: ${this.state.email}`);
}
render() {
const { email, password } = this.state;
return (
<div className="App">
<h2>Sign In</h2>
<Form className="form" onSubmit={(e) => this.submitForm(e)}>
<FormGroup>
<Label>Username</Label>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="[email protected]"
valid={this.state.validate.emailState === "has-success"}
invalid={this.state.validate.emailState === "has-danger"}
value={email}
onChange={(e) => {
this.validateEmail(e);
this.handleChange(e);
}}
/>
<FormFeedback>
Uh oh! Looks like there is an issue with your email. Please input
a correct email.
</FormFeedback>
<FormFeedback valid>
That's a tasty looking email you've got there.
</FormFeedback>
<FormText>Your username is most likely your email.</FormText>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="********"
value={password}
onChange={(e) => this.handleChange(e)}
/>
</FormGroup>
<Button>Submit</Button>
</Form>
</div>
);
}
}
export default App;
結論
このチュートリアルでは、Reactstrapを使用してReactアプリケーションでサインインフォームを作成しました。 これにより、Reactコンポーネントを備えたBootstrap4要素を使用してビルドできます。
Reactの詳細については、Reactトピックページで演習とプログラミングプロジェクトを確認してください。