iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

看初心者怎麼學React系列 第 28

Day28 實作todoList(三)新增事項到State

Header、Button、List元件完成後,我們在根元件App.js依序引入使用,
todoList所有的資料處理都需要在App.js中執行,最後用props分別將要顯示的資料傳入各元件中。

加入Header

https://ithelp.ithome.com.tw/upload/images/20211013/20140303jHf7nprCDk.jpg

App.js 引入Header元件

//App.js

import React from 'react';
import './App.scss';
import Header from './components/Header';

/*元件App*/
function App() {

  return (
    <div className="App">
      <Header />
    </div>
  )
}

export default App;

https://ithelp.ithome.com.tw/upload/images/20211013/20140303VYM38VUv42.png

App.js內建立Input function元件

https://ithelp.ithome.com.tw/upload/images/20211013/20140303gQLtsxliEv.png

新增待辦事項的input因為我不想將處理資料的函式和元件分成兩個檔案,
所以直接寫在App.js裡。

1.Input元件內會用到Button元件,記得將Button元件引入。

2.接著引入以下方法:

  • react - useRef :取得input輸入的value
  • react - useState:以陣列儲存todoList的項目

3.為了顯示畫面先設立假的待辦資料

import React, { useRef, useState } from 'react';
import './App.scss';
import Header from './components/Header';
import Button from './components/Button';

//假資料格式
const fakeList =[
{key:1,content:'買牛奶',done:false},
{key:2,content:'繳費',done:true}
]

/*元件App*/
function App() {

//儲存資料內容
  const [todoList, setTodoList] = useState(fakeList)

  /*建立輸入元件input*/
  function Input(prop) {

	//預設useRef
    const inputVal = useRef(null)

//=========將取得的值存入State的函式 開始=========
    function getInputValue() {
	//通過useRef取得input的值
      const value = inputVal.current.value
	//input裡是空的,不要儲存資料
      if (inputVal.current.value === '') return
	//存入state裡
      else {
        setTodoList([...todoList, 
				{ key: Date.now(), content: value, done: false }
				])
	//存入後清空input
        inputVal.current.value = ''
      }
    }
//=========將取得的值存入State的函式 結束=========

    return (
      <div className="input flex" >
        <input type="text" ref={inputVal} />
        <div onClick={() => getInputValue()}>
          <Button content="新增事項" />
        </div>
      </div>
    );
  }
	/*輸入元件input 結束*/

//測試State
consoloe.log(todoList)

//把App元件頁面結構建立出來
  return (
    <div className="App">
      <Header />
      <div className="container">
        <Input />
        <div className="list-wrapper">
     
        </div>
      </div>
    </div>
  )
}

export default App;

在App.scss調整樣式


//共用樣式...

//App元件部分樣式
html{
  background-color: rgb(212, 201, 186);
}

//App.js 置中
.App {
  width: 100vw;
  margin-inline:auto ;
 }
 .container{
   margin-inline: auto;
   width: 700px;

   .list-wrapper{
    margin-top: 30px;
  }
 }
 
.center{
  align-items: center;
}

.input{
  input{
      margin-right: 10px;
      font-size: 20px;
      outline:none;
      width: 600px;
  }
}

.wrap{
  flex-direction: column;
}

//Header樣式...

//Button 樣式...

//list 樣式...

這邊樣式都是參考,可以照自己喜歡的設計去排版

https://ithelp.ithome.com.tw/upload/images/20211013/20140303digCfQbTUs.png

可以新增資料了


上一篇
Day27 React-實作todoList(二)建立子元件
下一篇
Day29 實作todoList(四)產生事項列表
系列文
看初心者怎麼學React30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-14 12:09:56

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

Taco iT邦新手 5 級 ‧ 2021-10-15 23:22:24 檢舉

謝謝留言~能成功完賽真的太好了!

我要留言

立即登入留言