Javascript 如何将id/className/refs分配给输入框，然后使用React在变量中调用它？

我是React的初学者，我刚刚开始学习React。这是我的第一个项目，它是一个费用追踪器。我几乎完成了，但有一件事我无法理解，那就是：如何在react中使用id和类名？。我尝试过使用refs，但这给了我一个错误我只想给价格输入框分配一个id，然后在变量中调用它，而不出现任何错误。有人能帮我吗我的代码：

import React from 'react';
//import logo from './logo.svg';
import './App.css';

function App() {
  var income = prompt("What is your income")
  var incometxt = income
  var price = React.findDOMNode(this.refs.price).value
  var expenses = 0
  function btnfunc() {
  expenses = +price + +expenses
   console.log(expenses, price)
  }

return(
<>
<div>
  <h1>Income:</h1><h1>{incometxt}</h1>
  <h1>Expense:</h1><h1>{expenses}</h1>
</div>
    <div>
      <input type="number" placeholder="Expense price" ref="price"></input>
      <button onClick={btnfunc}>Click me</button>
    </div>
</> 

)
}
export default App;

从“React”导入React；
//从“/logo.svg”导入徽标；
导入“/App.css”；
函数App（）{
var收入=提示（“您的收入是多少”）
var IncomeText=收入
var price=React.findDOMNode（this.refs.price）.value
风险值费用=0
函数btnfunc（）{
费用=+价格++费用
控制台日志（费用、价格）
}
返回(
收入：{IncomeText}
费用：{费用}
点击我
)
}
导出默认应用程序；

实现您正在尝试的功能的更好方法是使用

useState

hook：

import React, { useState } from "react";
//import logo from './logo.svg';
import "./App.css";

function App() {
  var income = prompt("What is your income");
  var incometxt = income;

  const [price, setPrice] = useState(null);

  var expenses = 0;
  function btnfunc() {
    expenses = +price + +expenses;
    console.log(expenses, price);
  }

  return (
    <>
      <div>
        <h1>Income:</h1>
        <h1>{incometxt}</h1>
        <h1>Expense:</h1>
        <h1>{expenses}</h1>
      </div>
      <div>
        <input type="number" placeholder="Expense price" value={price} onChange={(e) => setPrice(e.target.value)}/>
        <button onClick={btnfunc}>Click me</button>
      </div>
    </>
  );
}
export default App;

import React，{useState}来自“React”；
//从“/logo.svg”导入徽标；
导入“/App.css”；
函数App（）{
var收入=提示（“您的收入是多少”）；
var IncomeText=收入；
const[price，setPrice]=useState（null）；
var费用=0；
函数btnfunc（）{
费用=+价格++费用；
控制台日志（费用、价格）；
}
返回(
收入：
{incometext}
费用：
{费用}
setPrice（e.target.value）}/>
点击我
);
}
导出默认应用程序；

这并不能完全回答一个问题，但我建议用这样的状态来做

import React, {useState} from 'react';
//import logo from './logo.svg';
import './App.css';

function App() {
  const [price, setPrice] = useState()
  var income = prompt("What is your income")
  var incometxt = income
  var expenses = 0
  function btnfunc() {
  expenses = +price + +expenses
   console.log(expenses, price)
  }

return(
      <input 
         type="number" 
         placeholder="Expense price" 
         value={price} 
         onChange={(e) => setPrice(e.target.value)}
       />

)
}
export default App;

import React，{useState}来自“React”；
//从“/logo.svg”导入徽标；
导入“/App.css”；
函数App（）{
const[price，setPrice]=useState（）
var收入=提示（“您的收入是多少”）
var IncomeText=收入
风险值费用=0
函数btnfunc（）{
费用=+价格++费用
控制台日志（费用、价格）
}
返回(
setPrice（即target.value）}
/>
)
}
导出默认应用程序；

在这种情况下，您应该使用REACT witch的主要概念是“状态”