有人可以解釋一下自定義掛鈎如何獲取數據以及自定義掛鈎的深度流程嗎

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。