状态表单选项的 Javascript 条件

问题描述

我是 React 新手，这是我关于 Stackoverflow 的第一个问题。我有一个预算应用程序，用户可以在其中选择“收入”或“费用”选项和两个输入 - 名称和金额。我的应用程序基于此教程项目 https://github.com/bradtraversy/expense-tracker-react

在 newExpenseTransaction/newIncomeTransaction 我有：

文本：输入文本 - 收入/支出名称

金额：输入金额

选项：这个状态来自表单，用户在这里检查“收入”/“费用”

我正在使用 useContext 进行交易。

除了 newExpenseTransaction 和 newIncomeTransaction 之间的验证外，一切正常。

我需要，如果条件基于用户在表单中选择的内容（“收入”/“费用”），我认为很简单。

IF 在表单/交易选项中选择的选项是“收入” 返回 addTransaction(newIncomeTransaction)

IF 在表单/交易选项中选择的选项是“费用” 返回 addTransaction(newExpenseTransaction)

在下面的代码中，IF 条件不起作用，但代码执行第一个函数，在这种情况下：addTransaction(newExpenseTransaction)。

在全局状态下，一切看起来都不错。

所以，我的问题是：我应该如何调节表单选项状态以返回 addTransaction(newIncomeTransaction) 或 addTransaction(newExpenseTransaction)？

import React,{ useState,useContext } from "react";
import classes from "./AddTransactionForm.css";
import { GlobalContext } from "../../../context/GlobalState";

export const Form = () => {
  const [text,setText] = useState("");
  const [amount,setAmount] = useState(0);
  const [option,setoption] = useState("");

const options = [
  { label: "Income",value: "income" },{ label: "Expense",value: "expense" },];

const { addTransaction } = useContext(GlobalContext);

const onSubmit = (e) => {
  e.preventDefault();

  const newExpenseTransaction = {
    id: Math.floor(Math.random() * 10000),text,amount: -Math.abs(amount),option,};
  // addTransaction(newExpenseAmount);

  const newIncomeTransaction = {
    id: Math.floor(Math.random() * 10000),amount: parseInt(amount),};
  // addTransaction(newIncomeAmount);

  if (addTransaction.option === options["expense"]) {
    return addTransaction(newExpenseTransaction);
  } else if (addTransaction.option === options["income"]) {
    return addTransaction(newIncomeTransaction);
  }
};

return (
  <div>
    <form className={classes.form} onSubmit={onSubmit}>
      <select value={option} onChange={(e) => setoption(e.target.value)}>
        {options.map((option) => (
          <option key={option.key} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Name"
      />
      <input
        type="text"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        placeholder="PLN"
      />
      <input type="submit" value="Send" />
    </form>
  </div>
);

};

解决方法

你有一个 useState Hook，所以你可以使用它。 当您更改所选选项时，您的选项状态会更新。 它发生在这一行： select value={option} onChange={(e) => setOption(e.target.value)}> 但是，请检查初始状态，你用空字符串初始化它.. 如果没有变化，它可能保持为空。 现在，使条件如下：

    if (option === "expense") {
    return addTransaction(newExpenseTransaction);
  } else if (option === "income") {
    return addTransaction(newIncomeTransaction);
  }