React 通过一个输入内容加入列表案例熟悉 Hook 基本使用

我们创建一个react项目 在src下创建components文件夹
在下面创建一个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

首先 我们通过一个比较典型的方法定义了一个用于声明表单元素绑定响应式数据的的函数useInputValue
接收一个参数 用于做响应式数据的默认值 然后暴露他的value 同时 绑定了一个onChange
onChange这个事件大家应该并不陌生 就是表单元素内容放生变化时
这里的意思就是 当 onChange 触发说明输入框或者其他表单元素内容已经变化了 那么 我们就执行setValue(e.target.value),
setValue是通过useInputValue声明出来用于修改响应式数据的函数 就是通过setValue将表单修改后的内容写入到响应式数据的内容当中
这个写法还是比较正规的 GitHub 很多案例采用这种方式
然后 我们自己写了一个clearValue 用于手动清空这个数据

然后 我们在开始执行了

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

意识 我要一个clearValue单独拿出来用 然后 整个方法返回的那个对象 给我装在这个text 中
因为 value和onChange事件的逻辑一定要在一起 不然就出问题了

然后 我们给表单绑定了 onSubmit 事件 用于监听它提交 因为 我们就一个输入框 直接按回车 表单就提交内容了
然后绑定的事件逻辑是onSubeitHandler
首先 进入事件 我们最先执行

e.preventDefault();

阻止元素的默认行为 因为表单提交会跳转的 我们要拦截掉他的这个行为 不然你也可以不加这个看一下 就会自己跳转
然后 我们执行

onSubnit(text.value);

首先 参数来讲 text是通过useInputValue声明是获取的 那么 他的value就是这个响应式数据的值
调用了onSubnit
这个 onSubnit 是 父组件给的

可能大家看到不是很明白 或者 我们其实可以这样写

函数模式下 接受的第一个参数 就是props 为了方便 直接 { onSubnit }
意思就是 拿取 props中的 onSubnit
然后 调用了刚刚弄出来的 clearValue 清空响应式数据

然后 我们编写 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 组件 然后调用
声明了一个 todos 响应式数据 默认值是一个空数组
然后 声明setTodos 用于修改todos响应式数据

然后我们之前说过 index.jsx组件需要父组件给一个函数onSubnit
这里 我们给了setValue
里面的逻辑就是 接受到text 也就是index组件传过来的 text.value
将他通过ES6数组合并的方法与自身已有下标进行合并
然后通过 setTodos 修改值

然后 在index组件下写了一个循环 输出了todos数组的内容
我们运行项目

我们在输入框中输入内容 然后按回车 内容就会通过onSubnit 一个一个与todos合并 加载到下面的循环元素中去

这个按理的逻辑 大家还是可以好好去演示一下的 如果看懂了 收获会比较大