Javascript 状态表单选项的条件

Question

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

在newExpenseTransaction/newIncomeTransaction我有：

text: 输入文本 - income/expense

的名称

数量：输入数量

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

我正在使用 useContext 进行交易。

除 newExpenseTransaction 和 newIncomeTransaction.

之间的验证外，一切正常

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

IF在form/transaction选项中选择的选项是“收入” RETURN addTransaction(newIncomeTransaction)

IF 在 form/transaction 选项中选择的选项是“费用” RETURN addTransaction(newExpenseTransaction)

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

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

所以，我的问题是：我应该如何将表单选项状态设置为 return 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),
    text,
    amount: parseInt(amount),
    option,
  };
  // 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>
);

};

Answer 1

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

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

Javascript 状态表单选项的条件

Javascript conditions for state form option

javascript

reactjs

if-statement

switch-statement

options