こんにちは、KOUKIです。Reactで画面開発を行なっています。
前回は、Orderページを実装しました。今回は、Prifileを実装します。
尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!
前回
事前準備
|
1 |
touch react-admin/src/pages/Profile.tsx |
Profileページ
ページテンプレート
Profileページのテンプレートを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 |
// pages/Profile.tsx import Layout from '../components/Layout' const Profile = () => { return ( <Layout> Profile </Layout> ) } export default Profile |
ルートの作成
Profileページへのルートを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// App.tsx ... import Profile from './pages/Profile' function App() { return ( <div className="App"> <BrowserRouter> ... <Route path={'/profile'} component={Profile}></Route> </BrowserRouter> </div> ); } export default App; |
ページ遷移の確認
「docker-compose up」でDockerを起動し、「http://localhost:3000」にアクセスしましょう。
そこからユーザー名「test test」にクリックするとProfileページに飛べます。
Profileページの作成
Profileページの中身を実装します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
// pages/Profile.tsx import { SyntheticEvent, useEffect, useState } from 'react' import { Button, TextField } from '@material-ui/core' import Layout from '../components/Layout' import axios from 'axios' const Profile = () => { const [first_name, setFirstName] = useState("") const [last_name, setLastName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [password_confirm, setPasswordConfirm] = useState("") const userUrl = 'user' useEffect(() => { ( async () => { const { data } = await axios.get(userUrl) setFirstName(data.first_name) setLastName(data.last_name) setEmail(data.email) } )() }, []) const infoSubmit = async(e: SyntheticEvent) => { e.preventDefault() } const passwordSubmit = async(e: SyntheticEvent) => { e.preventDefault() } return ( <Layout> <h3>Account Information</h3> <form onSubmit={infoSubmit}> <div className="mb-3"> <TextField label="First Name" onChange={e => setFirstName(e.target.value)} value={first_name} /> </div> <div className="mb-3"> <TextField label="Last Name" onChange={e => setLastName(e.target.value)} value={last_name} /> </div> <div className="mb-3"> <TextField label="Email" onChange={e => setEmail(e.target.value)} value={email} /> </div> <Button variant="contained" color="primary" type="submit"> Submit </Button> </form> <h3 className="mt-4">Change Password</h3> <form onSubmit={passwordSubmit}> <div className="mb-3"> <TextField label="Password" type="password" onChange={e => setPassword(e.target.value)} /> </div> <div className="mb-3"> <TextField label="Password Confirm" type="password" onChange={e => setPasswordConfirm(e.target.value)} /> </div> <Button variant="contained" color="primary" type="submit"> Submit </Button> </form> </Layout> ) } export default Profile |
ユーザー情報/パスワードの変更ができる画面を用意しました。
また、useEffectを使って、Profileページが開いたタイミングでAPIからユーザー情報を取得し、画面に表示する処理も入れています。
infoSubmit処理
infoSubmitは、ユーザー情報の変更を行いたいときに使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// pages/Profile.tsx ... const Profile = () => { ... const userInfo = 'info' ... const infoSubmit = async(e: SyntheticEvent) => { e.preventDefault() await axios.put(userInfo, { first_name, last_name, email }) } ... } export default Profile |
項目にupdateをつけて、SUBMITボタンを押下してみましょう。
ページをリダイレクトすると、ユーザー情報が更新されたことがわかります。
passwordSubmit処理
passwordSubmitは、パスワードの変更を行いたい時に使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// pages/Profile.tsx ... const Profile = () => { ... const userPassword = 'password' ... const passwordSubmit = async(e: SyntheticEvent) => { e.preventDefault() await axios.put(userPassword, { password, password_confirm }) } ... } export default Profile |
こちらはパスワードの変更が確認できるように、一旦ログアウトしてから更新されたか確認してみてください。
次回
次回は、Reduxの導入を行います。
Reactまとめ
参考書籍
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1919737f.3a3d64cb.19197380.327d0987/?me_id=1278256&item_id=19902768&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F6041%2F2000009456041.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
ソースコード
ここまで実装したソースコードを下記に記載します。
Profile.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
// pages/Profile.tsx import { SyntheticEvent, useEffect, useState } from 'react' import { Button, TextField } from '@material-ui/core' import Layout from '../components/Layout' import axios from 'axios' const Profile = () => { const [first_name, setFirstName] = useState("") const [last_name, setLastName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [password_confirm, setPasswordConfirm] = useState("") const userUrl = 'user' const userInfo = 'info' const userPassword = 'password' useEffect(() => { ( async () => { const { data } = await axios.get(userUrl) setFirstName(data.first_name) setLastName(data.last_name) setEmail(data.email) } )() }, []) const infoSubmit = async(e: SyntheticEvent) => { e.preventDefault() await axios.put(userInfo, { first_name, last_name, email }) } const passwordSubmit = async(e: SyntheticEvent) => { e.preventDefault() await axios.put(userPassword, { password, password_confirm }) } return ( <Layout> <h3>Account Information</h3> <form onSubmit={infoSubmit}> <div className="mb-3"> <TextField label="First Name" onChange={e => setFirstName(e.target.value)} value={first_name} /> </div> <div className="mb-3"> <TextField label="Last Name" onChange={e => setLastName(e.target.value)} value={last_name} /> </div> <div className="mb-3"> <TextField label="Email" onChange={e => setEmail(e.target.value)} value={email} /> </div> <Button variant="contained" color="primary" type="submit"> Submit </Button> </form> <h3 className="mt-4">Change Password</h3> <form onSubmit={passwordSubmit}> <div className="mb-3"> <TextField label="Password" type="password" onChange={e => setPassword(e.target.value)} /> </div> <div className="mb-3"> <TextField label="Password Confirm" type="password" onChange={e => setPasswordConfirm(e.target.value)} /> </div> <Button variant="contained" color="primary" type="submit"> Submit </Button> </form> </Layout> ) } export default Profile |
App.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// App.tsx import './App.css'; import {BrowserRouter, Route} from 'react-router-dom' import {RedirectToUsers} from './components/RedirectToUsers' import Users from './pages/Users' import Login from './pages/Login' import Register from './pages/Register' import Links from './pages/Links' import Products from './pages/products/Products' import ProductForm from './pages/products/ProductForm' import Orders from './pages/Orders' import Profile from './pages/Profile' function App() { return ( <div className="App"> <BrowserRouter> <Route path={'/'} exact component={RedirectToUsers}></Route> <Route path={'/login'} component={Login}></Route> <Route path={'/register'} component={Register}></Route> <Route path={'/users'} exact component={Users}></Route> <Route path={'/users/:id/links'} component={Links}></Route> <Route path={'/products'} exact component={Products}></Route> <Route path={'/products/create'} component={ProductForm}></Route> <Route path={'/products/:id/edit'} component={ProductForm}></Route> <Route path={'/orders'} exact component={Orders}></Route> <Route path={'/profile'} component={Profile}></Route> </BrowserRouter> </div> ); } export default App; |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。