我們創(chuàng)建一個react項目 在src下創(chuàng)建components文件夾
在下面創(chuàng)建一個index.jsx
index.jsx 參考代碼如下

import React, { useState } from "react";

const useInputValue = (initialValue) => {
    const [value,setValue] = useState(initialValue);
    return {
        value,
        onChange: e => setValue(e.target.value),
        clearValue: () => setValue("")
    }
}

const TodoForm = ({ onSubnit }) => {
    const { clearValue,...text } = useInputValue("");
    function onSubeitHandler(e){
        e.preventDefault();
        onSubnit(text.value);
        clearValue("");
    }
    return (
        <form onSubmit = { onSubeitHandler }>
            <input type="text" { ...text }/>
        </form>
    )
}

export default TodoForm

首先 我們通過一個比較典型的方法定義了一個用于聲明表單元素綁定響應式數(shù)據(jù)的的函數(shù)useInputValue
接收一個參數(shù) 用于做響應式數(shù)據(jù)的默認值 然后暴露他的value 同時 綁定了一個onChange
onChange這個事件大家應該并不陌生 就是表單元素內(nèi)容放生變化時
這里的意思就是 當 onChange 觸發(fā)說明輸入框或者其他表單元素內(nèi)容已經(jīng)變化了 那么 我們就執(zhí)行setValue(e.target.value),
setValue是通過useInputValue聲明出來用于修改響應式數(shù)據(jù)的函數(shù) 就是通過setValue將表單修改后的內(nèi)容寫入到響應式數(shù)據(jù)的內(nèi)容當中
這個寫法還是比較正規(guī)的 GitHub 很多案例采用這種方式
然后 我們自己寫了一個clearValue 用于手動清空這個數(shù)據(jù)

然后 我們在開始執(zhí)行了

const { clearValue,...text } = useInputValue("");

意識 我要一個clearValue單獨拿出來用 然后 整個方法返回的那個對象 給我裝在這個text 中
因為 value和onChange事件的邏輯一定要在一起 不然就出問題了

然后 我們給表單綁定了 onSubmit 事件 用于監(jiān)聽它提交 因為 我們就一個輸入框 直接按回車 表單就提交內(nèi)容了
然后綁定的事件邏輯是onSubeitHandler
首先 進入事件 我們最先執(zhí)行

e.preventDefault();

阻止元素的默認行為 因為表單提交會跳轉(zhuǎn)的 我們要攔截掉他的這個行為 不然你也可以不加這個看一下 就會自己跳轉(zhuǎn)
然后 我們執(zhí)行

onSubnit(text.value);

首先 參數(shù)來講 text是通過useInputValue聲明是獲取的 那么 他的value就是這個響應式數(shù)據(jù)的值
調(diào)用了onSubnit
這個 onSubnit 是 父組件給的

可能大家看到不是很明白 或者 我們其實可以這樣寫

函數(shù)模式下 接受的第一個參數(shù) 就是props 為了方便 直接 { onSubnit }
意思就是 拿取 props中的 onSubnit
然后 調(diào)用了剛剛弄出來的 clearValue 清空響應式數(shù)據(jù)

然后 我們編寫 src下的 App.js代碼如下

import React,{ useState } from "react"
import Index from "./components/index.jsx"

const Appind = () => {
  
  const [todos,setTodos] = useState([]);

  function setValue(text) {
    setTodos([{ text },...todos]);
  }

  return (
    <div>
      <Index onSubnit={ setValue }/>
      <div>
          {
            todos.map((element,index) => {
              return (
                <div key={index}>
                  { element.text } 
                </div>
              )
            })
          }
      </div>
    </div>
  );
};

export default Appind;

這里 我們先導入了剛剛寫的 index 組件 然后調(diào)用
聲明了一個 todos 響應式數(shù)據(jù) 默認值是一個空數(shù)組
然后 聲明setTodos 用于修改todos響應式數(shù)據(jù)

然后我們之前說過 index.jsx組件需要父組件給一個函數(shù)onSubnit
這里 我們給了setValue
里面的邏輯就是 接受到text 也就是index組件傳過來的 text.value
將他通過ES6數(shù)組合并的方法與自身已有下標進行合并
然后通過 setTodos 修改值

然后 在index組件下寫了一個循環(huán) 輸出了todos數(shù)組的內(nèi)容
我們運行項目

我們在輸入框中輸入內(nèi)容 然后按回車 內(nèi)容就會通過onSubnit 一個一個與todos合并 加載到下面的循環(huán)元素中去

這個按理的邏輯 大家還是可以好好去演示一下的 如果看懂了 收獲會比較大文章來源地址http://www.zghlxwxcb.cn/news/detail-485783.html

到了這里，關(guān)于React 通過一個輸入內(nèi)容加入列表案例熟悉 Hook 基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！