有人可以解释一下自定义钩子如何获取数据以及自定义钩子的深度流程吗答案

【问题标题】：Can someone explain me how custom hooks get the data and in depth flow of custom hooks有人可以解释一下自定义钩子如何获取数据以及自定义钩子的深度流程吗
【发布时间】：2022-10-08 23:33:07
【问题描述】：

//use Input HOOK

我想知道这个自定义钩子是如何工作的

import { useState } from "react";

export default initialValue => {
  const [value, setValue] = useState(initialValue);
  return {
    value,
    onChange: event => {
      setValue(event.target.value);
    },
    reset: () => setValue("")
  };
};


//todo form

这个 onchange 方法如何工作即使在这个程序中没有编写 onchange 函数，它如何更新数据

import React from "react";
import TextField from "@material-ui/core/TextField";
import useInputState from "./useInputState";

const TodoForm = ({ saveTodo }) => {
  const { value, reset, onChange } = useInputState("");

  return (
    <form
      onSubmit={event => {
        event.preventDefault();
        saveTodo(value);
        reset();
      }}
    >
      <TextField
        variant="outlined"
        placeholder="Add todo"
        margin="normal"
        value={value}
        onChange={onChange}
      />
    </form>
  );
};

export default TodoForm;

view full programm Code Sandbox link

【问题讨论】：

不清楚你在问什么。这个钩子基本上将您通常为表单输入编写的一些标准样板移动到单个函数（您引用的自定义钩子）中。它返回一些道具/属性，包括您传递给输入的onChange 处理程序。如果您有更具体的问题，请编辑您的问题以使其更清楚。

标签： javascript reactjs material-ui react-custom-hooks

【解决方案1】：

JS 中的函数被视为任何其他变量。所以de-structured onChange（在组件中）正在获取一个在custom hook 中匿名定义的函数的引用，然后TextField 组件的onChange 方法会使用该函数。这类似于通过引用传递变量的方式是 JS。

【讨论】：