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

这篇具有很好参考价值的文章主要介绍了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 是父组件给的
React 通过一个输入内容加入列表案例熟悉 Hook 基本使用
可能大家看到不是很明白或者我们其实可以这样写

函数模式下接受的第一个参数就是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数组的内容
我们运行项目
React 通过一个输入内容加入列表案例熟悉 Hook 基本使用
我们在输入框中输入内容然后按回车内容就会通过onSubnit 一个一个与todos合并加载到下面的循环元素中去

这个按理的逻辑大家还是可以好好去演示一下的如果看懂了收获会比较大文章来源地址https://www.toymoban.com/news/detail-485783.html