如何在打字稿界面中發送功能？

Question

// ExpenseForm.tsx

interface ExpenseData {
  enteredTitle: string;
  enteredAmount: number;
  enteredDate: string;
}

const ExpenseForm = (props) => {
  const [userInput, setUserInput] = useState<ExpenseData>({
    enteredTitle: "",
    enteredAmount: 10,
    enteredDate: "",
  });

  const { register, handleSubmit, resetField } = useForm<ExpenseData>();

  const onValid = (data: ExpenseData) => {
    setUserInput(data);
    resetField("enteredAmount");
    resetField("enteredDate");
    resetField("enteredTitle");
  };

};

// NewExpense.tsx
const NewExpense = (props) => {
  const saveExpenseDataHandler = (enteredExpenseData) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    console.log(expenseData); // I want to see this.
    props.onAddExpense(expenseData);
  };
  return (
    <div className="new-expense">
      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />
    </div>
  );
};

//App.tsx
const App = () => {
  const expenses = [
    {
      id: "xxxx",
      title: "xxx",
      amount: xxxx,
      date: new Date(2022, 5, 16),
    },
  ];

  const addExpenseHandler = (expense) => {
    console.log(expense);
  };

  return (
    <div>
      <NewExpense onAddExpense={addExpenseHandler} />
    </div>
  );
};

我在 Udemy Course 中使用對打字稿做出反應。

我想將NewExpense.tsx中的 onSaveExpenseData 發送到ExpenseForm.tsx 。 如何在界面中定義類型onSaveExpenseData ？

我也想使用重置

我試圖onSaveExpenseData:()=>void ，但它不起作用。

Answer 1

您可以導出expense類型。

export interface Expense {
  id: string;
  title: string;
  amount: number;
  date: Date;
}

然后在您的功能中，您可以輸入expense

const addExpenseHandler = (expense: Expense) => {
    console.log(expense);
};

在您的NewExpense.tsx中，您可以輸入它的道具：

interface NewExpenseProps {
  onAddExpense: (e: Expense) => void;
}

export const NewExpense = ({ onAddExpense }: NewExpenseProps) => {
  const saveExpenseDataHandler = (enteredExpenseData: Expense) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    console.log(expenseData); // I want to see this.
    onAddExpense(expenseData);
  };

  return (
    <div className="new-expense">
      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} />
    </div>
  );
};

在您的費用表格中，您可以執行相同的操作：

interface ExpenseFormProps {
  onSaveExpenseData: (v: Expense) => void;
}

export const ExpenseForm = ({ onSaveExpenseData }: ExpenseFormProps) => {
  console.log(onSaveExpenseData);
  return <div>ExpenseForm</div>;
};

Answer 2

您需要在反應組件上定義您的道具。 此外，您編寫的類型幾乎是正確的，但是您缺少 1 個參數。

最簡單的方法是這樣的：

import { FC } from 'react';

interface Props {
   onSaveExpenseData: (_: Expense) => void
}

const ExpenseForm: FC<Props> = ...your current function

FC 是 FunctionalComponent 的反應類型。 它將為您定義道具和返回值。 < Props > 是您傳遞給此類型的泛型。 它看起來很復雜，但您不必完全理解它就可以使用它。