声明将数字添加为字符串而不是整数

Question

我正在尝试创建一种费用管理器，但我遇到了一个问题，即我提交的数字被添加为字符串而不是整数。我确保默认设置为整数而不是字符串。

“有问题的”部分是收入部分（我已突出显示）

应用程序：

import Outcome from "./components/Outcome";
import Income from "./components/Income";

const App = () => {
  const [sum, setSum] = useState(0);

  const onChangeHandlerOutcome = (value) => {
    setSum(sum - value);
  };

  const onChangeHandlerIncome = (value) => {
    setSum(sum + value);
  };

  return (
    <div>
      <Outcome onChangeHandlerOutcome={onChangeHandlerOutcome} />
      <Income onChangeHandlerIncome={onChangeHandlerIncome} />
      You have {sum}$!
    </div>
  );
};

export default App;

收入构成


const Income = (props) => {
  const [input, setInput] = useState(0);

  const setInputHandler = (e) => {
    e.preventDefault();
    setInput(e.target.value);
    props.onChangeHandlerIncome(input);
  };

  return (
    <div>
      <form onSubmit={setInputHandler}>
        <label>
          Income
          <input
            type="text"
            name="name"
            onChange={(e) => setInput(e.target.value)}
          ></input>
        </label>
        <input type="submit" value="Submit"></input>
      </form>
    </div>
  );
};

export default Income;

结果部分：


const Outcome = (props) => {
  const [input, setInput] = useState(0);

  const setInputHandler = (e) => {
    e.preventDefault();
    setInput(e.target.value);
    props.onChangeHandlerOutcome(input);
  };

  return (
    <div>
      <form onSubmit={setInputHandler}>
        <label>
          Outcome
          <input
            type="text"
            name="name"
            onChange={(e) => setInput(e.target.value)}
          ></input>
        </label>
        <input type="submit" value="Submit"></input>
      </form>
    </div>
  );
};

export default Outcome;

Answer 1

在 onChange={(e) => setInput(e.target.value)} 中，e.target.value 的值将始终是一个字符串。您可以使用 parseInt(e.target.value) 转换为整数。或者使用 parseFloat 作为浮点数。

这不会很好地处理国际号码（使用不同的小数点分隔符然后使用“.”），所以请注意，从字符串到数字的转换可能需要比 parseInt.[=15= 更多的魔法]

声明将数字添加为字符串而不是整数

State adding number as string and not as integer

reactjs

use-state