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

Question

//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 function 被写入这个程序

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;

查看完整程序代码沙箱链接

Answer 1

JS 中的函数被视为任何其他变量。 因此， de-structured onChange （在组件中）正在引用custom hook中匿名定义的 function，然后由TextField组件的 onChange 方法使用。 这类似于你通过引用传递变量的方式是 JS。