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

news2024/11/27 10:27:35

我们创建一个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;