編集履歴

質問編集履歴

スタイルについての質問に変更

2020/09/17 01:02

投稿

スコア5

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~Firebaseを使ってデータ~~の~~保存/取り出し~~をしたい
1	+ テキストラインの開始位置を揃えたまま中央寄せしたい

test CHANGED Viewed

@@ -2,470 +2,124 @@
-Reactを使って家計簿アプリを作っています。
+テキストラインの開始位置を揃えたまま全体を中央に寄せたいです
-この家計簿をログインのユーザーごとにデータ保存/取り出しをしたいのですが、
+金額の最後に「円」がある為、少し左にずれてしまっております。
+こちらの左のズレをなくし、「内容」と「金額」の開始ラインを揃えたいです。
-実装方法で詰まっています。
+アドバイスをいただけると幸いです。
-ログイン機能は出来上がり、console.log(currentUser.uid)でuidが表示されるのを確認しました。
+以下現在のイメージです
-保存したいデータは、incomeItemsとexpenseItemsです。
+![イメージ説明](704250979460ec3545ae23c621972b37.png)
-uidを使って紐付けをしたいと考えています。
-是非アドバイスをいただけますと幸いです。
 ### 該当のソースコード
+```HTML
+    <form className="add-form">
+      <select onChange={typeHandler}>
+        <option value="inc">+</option>
+        <option value="exp">-</option>
+      </select>
+      <div className="add-text">
-firebaseとデータやり取り関係のないコンポーネントは省略してます。
+        <label>内容</label>
+        <input type="text" value={inputText} onChange={inputTextHandler} />
+      </div>
+      <div className="add-amount">
+        <label>金額</label>
+        <input type="number" value={inputAmount} onChange={inputAmountHandler}/>
+        <div>円</div>
+      </div>
+      <button className="add-btn" type="submit" onClick={submitItemHandler}>追加</button>
+    </form>
+```
-Home.js
+```CSS
+.add-form {
-```JavaScript
-import React, {useState, useEffect, useContext, useMemo, useCallback} from 'react';
-import { auth, db } from "../firebase/Firebase";
-import { Header } from './Header';
-import { Balance } from './Balance';
-import { IncomeExpense } from './IncomeExpense';
-import { AddItem } from './AddItem';
-import { ItemsList } from './ItemsList';
-import { AuthContext } from '../auth/AuthProvider';
-function Home (props) {
+  background: var(--gray-color);
-  const [inputText, setInputText] = useState("");
-  const [inputAmount, setInputAmount] = useState(0);
-  const [incomeItems, setIncomeItems] = useState([]);
-  const [expenseItems, setExpenseItems] = useState([]);
-  const [type, setType] = useState("inc");
-  const { currentUser } = useContext(AuthContext)
-  console.log(currentUser.uid)
-  return (
-    <div>
-      <Header />
-      <Balance
-        incomeItems={incomeItems}
-        expenseItems={expenseItems}
-      />
-      <IncomeExpense
-        incomeItems={incomeItems}
-        expenseItems={expenseItems}
-      />
-      <AddItem
-        inputText={inputText}
-        setInputText={setInputText}
-        inputAmount={inputAmount}
-        setInputAmount={setInputAmount}
-        incomeItems={incomeItems}
-        setIncomeItems={setIncomeItems}
-        expenseItems={expenseItems}
-        setExpenseItems={setExpenseItems}
-        type={type}
-        setType={setType}
-      />
-      <ItemsList
-        incomeItems={incomeItems}
-        setIncomeItems={setIncomeItems}
-        expenseItems={expenseItems}
-        setExpenseItems={setExpenseItems}
-      />
-      <button onClick={() => auth.signOut()}>log out</button>
-    </div>
-  )
 }
-export default Home;
+.add-text {
-```
-AddItems.js
-```JavaScript
-import React, { useState } from 'react';
-export const AddItem = ({ inputText, setInputText, inputAmount, setInputAmount, incomeItems, setIncomeItems, expenseItems, setExpenseItems, type, setType}) => {
-  const typeHandler = (e) => {
-    setType(e.target.value)
-    console.log(type)
-  }
-  const inputTextHandler = (e) => {
-    setInputText(e.target.value);
-    console.log(inputText)
-  };
-  const inputAmountHandler = (e) => {
-    setInputAmount(parseInt(e.target.value))
-    console.log(inputAmount)
-  }
-  const submitItemHandler = (e) => {
-    e.preventDefault();
-    if ( type === 'inc' ) {
-      setIncomeItems([
-      ...incomeItems, {text: inputText, amount: inputAmount, id: Math.random() * 1000 }
-      ]);
-    } else if ( type === 'exp' ) {
-      setExpenseItems([
+  text-align: center;
-        ...expenseItems, {text: inputText, amount:inputAmount, id: Math.random() * 1000 }
-      ]);
-    }
-    console.log(incomeItems)
-  }
-  return (
-    <>
-      <form >
-        <select onChange={typeHandler}>
-          <option value="inc">＋</option>
-          <option value="exp" >-</option>
-        </select>
-        <label>Text</label>
-        <input type="text" placeholder="Text" value={inputText} onChange={inputTextHandler} />
-        <label>Amount</label>
-        <input type="number" placeholder="Value" value={inputAmount} onChange={inputAmountHandler} />
-        <button type="submit" onClick={submitItemHandler}>Add</button>
-      </form>
-    </>
-  )
-}
-```
-AuthProvider.js
-```JavaScript
-import React, { useEffect, useState } from "react";
-import { auth } from "../firebase/Firebase";
-const AuthContext = React.createContext()
-const AuthProvider = ({ children }) => {
-  const [currentUser, setCurrentUser] = useState(null);
-  //サインアップ後認証情報を更新
-  const signup = async (email, password, history) => {
-    try {
-      await auth.createUserWithEmailAndPassword(email, password);
-      auth.onAuthStateChanged(user => setCurrentUser(user));
-      history.push("/");
-    } catch (error) {
-      alert(error);
-    }
-  };
-  //ログインさせる
-  const login = async (email, password, history) => {
-    try {
-      await auth.signInWithEmailAndPassword(email,password);
-      auth.onAuthStateChanged(user => setCurrentUser(user));
-      history.push("/");
-    } catch (error) {
-      alert(error);
-    }
-  }
-  //初回アクセス時に認証済みかチェック
-  useEffect(() => {
-    auth.onAuthStateChanged(setCurrentUser);
-  }, []);
-  return (
-    <AuthContext.Provider value={{ signup, login, currentUser}}>
-      {children}
-    </AuthContext.Provider>
-  )
 }
-export {AuthContext, AuthProvider}
+.add-amount {
+  text-align: center;
-```
+}
-Login.js
+.add-form label {
-```JavaScript
+  display: inline-block;
-import React, { useContext } from "react";
+  margin: 10px 0;
-import { withRouter } from "react-router";
+  padding-right: 5px;
-import { AuthContext } from "./AuthProvider";
+}
-import { app } from "../firebase/Firebase";
-import firebase from "firebase/app";
-import "firebase/auth";
-const Login = ({ history }) => {
+.add-amount > div {
-  const { login } = useContext(AuthContext);
+  display: inline-block;
-  //AuthContextからlogin関数を受け取る
+}
-  const handleSubmit = event => {
+form input[type="text"] ,input[type="number"] {
-    event.preventDefault();
+  height: 40px;
-    const { email, password } = event.target.elements;
+  width: 300px;
-    login(email.value, password.value, history);
+  border: 1px solid #A9A9A9;
-  };
+  background: #fafafa;
+  border-radius: 3px;
+  color: #393939;
-  return (
-    <div>
-      <h1>Log in</h1>
-      <form onSubmit={handleSubmit}>
-        <label>
-          Email
-          <input name="email" type="email" placeholder="Email" />
-        </label>
-        <label>
-          Password
-          <input name="password" type="password" placeholder="password"/>
-        </label>
-        <button type="submit">Log in</button>
-      </form>
-    </div>
-  );
-};
+}
-export default withRouter(Login);
 ```
-PrivateRoute.js
-```
-import React, { useContext } from "react";
-import { Route } from "react-router-dom";
-import { AuthContext } from "./AuthProvider";
-import Login from "./Login";
-const PrivateRoute = ({ component: RouteComponent, ...options}) => {
-  const { currentUser } = useContext(AuthContext);
-  const Component = currentUser ? RouteComponent : Login;
-  return <Route {...options} component={Component} />;
-};
-export default PrivateRoute;
-```