編集履歴

質問編集履歴

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

2020/09/17 01:02

投稿

スコア5

title CHANGED Viewed

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

body CHANGED Viewed

@@ -1,236 +1,63 @@
 ### 前提・実現したいこと
+テキストラインの開始位置を揃えたまま全体を中央に寄せたいです
-Reactを使って家計簿アプリを作っています。
+金額の最後に「円」がある為、少し左にずれてしまっております。
-この家計簿をログインのユーザーごとにデータ保存/取り出しをしたいのですが、
+こちらの左のズレをなくし、「内容」と「金額」の開始ラインを揃えたいです。
-実装方法で詰まっています。
+アドバイスをいただけると幸いです。
+以下現在のイメージです
-ログイン機能は出来上がり、console.log(currentUser.uid)でuidが表示されるのを確認しました。
+![イメージ説明](704250979460ec3545ae23c621972b37.png)
-保存したいデータは、incomeItemsとexpenseItemsです。
-uidを使って紐付けをしたいと考えています。
-是非アドバイスをいただけますと幸いです。
 ### 該当のソースコード
-firebaseとデータやり取り関係のないコンポーネントは省略してます。
-Home.js
+```HTML
+    <form className="add-form">
+      <select onChange={typeHandler}>
+        <option value="inc">+</option>
+        <option value="exp">-</option>
+      </select>
+      <div className="add-text">
+        <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>
+```
-```JavaScript
+```CSS
-import React, {useState, useEffect, useContext, useMemo, useCallback} from 'react';
-import { auth, db } from "../firebase/Firebase";
-import { Header } from './Header';
+.add-form {
-import { Balance } from './Balance';
+  background: var(--gray-color);
-import { IncomeExpense } from './IncomeExpense';
-import { AddItem } from './AddItem';
+}
-import { ItemsList } from './ItemsList';
-import { AuthContext } from '../auth/AuthProvider';
+.add-text {
-function Home (props) {
+  text-align: center;
+}
-  const [inputText, setInputText] = useState("");
-  const [inputAmount, setInputAmount] = useState(0);
+.add-amount {
-  const [incomeItems, setIncomeItems] = useState([]);
-  const [expenseItems, setExpenseItems] = useState([]);
+  text-align: center;
-  const [type, setType] = useState("inc");
+}
+.add-form label {
+  display: inline-block;
+  margin: 10px 0;
+  padding-right: 5px;
+}
-  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}
+.add-amount > div {
-        setInputAmount={setInputAmount}
-        incomeItems={incomeItems}
-        setIncomeItems={setIncomeItems}
-        expenseItems={expenseItems}
-        setExpenseItems={setExpenseItems}
-        type={type}
-        setType={setType}
+  display: inline-block;
-      />
-      <ItemsList
-        incomeItems={incomeItems}
-        setIncomeItems={setIncomeItems}
-        expenseItems={expenseItems}
-        setExpenseItems={setExpenseItems}
-      />
-      <button onClick={() => auth.signOut()}>log out</button>
-    </div>
-  )
 }
-export default Home;
-```
-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([
-        ...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>
+form input[type="text"] ,input[type="number"] {
+  height: 40px;
+  width: 300px;
+  border: 1px solid #A9A9A9;
-        </select>
+  background: #fafafa;
-        <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>
+  border-radius: 3px;
-    </>
-  )
-}
-```
-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);
+  color: #393939;
-    }
-  };
-  //ログインさせる
-  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}
-```
-Login.js
-```JavaScript
-import React, { useContext } from "react";
-import { withRouter } from "react-router";
-import { AuthContext } from "./AuthProvider";
-import { app } from "../firebase/Firebase";
-import firebase from "firebase/app";
-import "firebase/auth";
-const Login = ({ history }) => {
-  const { login } = useContext(AuthContext);
-  //AuthContextからlogin関数を受け取る
-  const handleSubmit = event => {
-    event.preventDefault();
-    const { email, password } = event.target.elements;
-    login(email.value, password.value, history);
-  };
-  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;
 ```