不能將 append h1 元素添加到 React 中的父 div？

Question

我正在創建一個簡單的反應網站，該網站應該進行一些計算並在計算后找出我的輸入值的焦耳...現在輸入值已經預設但我將從我的<input>中刪除value=""之后。

這是問題所在的 .JSX 組件文件……其中一個組件。

import React, { Component } from 'react';
import Atom_icon from './cartridges.png';

class Joule_calc extends Component {


    

    render(){

        return (
            <div className='Joule_div'>
                <h3 style={{color:"white", textAlign:"center"}}>JOULE CALCULATOR</h3>
                <label className='lab1'>WEIGHT=/GRAMS</label><br></br>
                <input className='weight_inp' type='text' value="2" />
                <label className='lab2'>SPEED=M/S</label><br></br>
                <input className='speed_inp' type='text' value="5" />
                <button className='count_button' onClick={this.Create_response}>CALCULATE</button>
                <h1 className='Result_joule'></h1>
            </div>
        )
    }

    Create_response(){
        console.log("creating response...")
        let sum = document.createElement("h1")
        sum.className = 'Result_joule'
        sum.textContent = "678"

        let div_panel = document.getElementsByClassName("Joule_div")
        div_panel.append('Result_joule')
    }


    Returned_values(){
        let weight_val = document.getElementsByClassName("weight_inp")[0].value;
        let speed_val = document.getElementsByClassName("speed_inp")[0].value;
        
        let final_calculation = weight_val * speed_val
        return final_calculation
        
    }

} 


export default Joule_calc 

所以當我運行我的代碼時，我得到

Uncaught TypeError: div_panel.append is not a function
at Create_response (Joule_calc_window.jsx:31:1)

我不明白為什么我不能 append 我的新元素到 div。 它說它不是 function 那么解決方案是什么？ 我是 React 和 web 的新手，所以這可能只是一個新手。 我也嘗試像這樣在“Joule_div”中直接創建一個h1 。

<h1 className='Result_joule'>{"((try returning here from one of these methods))"}</h1>

但這當然也失敗了。 因此，將不勝感激一些幫助來了解正在發生的事情。 我試圖在單擊h1中的按鈕后添加一個數字，將來在方法中計算輸入值后將成為返回的數字。我想像

MyMethod(){
 value = values calculated
 return value
}

然后使用this.MyMethod示例獲取它

 <h1>{this.MyMethod}</h1>

這是一個當然沒有用的例子，否則我不會在這里，但至少讓你知道我正在嘗試做什么。 謝謝你。

Answer 1

你沒有充分利用反應的全部力量。 多虧了 JSX，你可以只用 js 編寫 UI。 State 更改觸發 UI 更新。

我可能會遺漏一些細節，但基本代碼如下所示。 您應該從 function 組件開始。

// Function component
const Joule_calc = () =>{

  // React hooks, useState
  const [weight, setWeight] = useState(0)
  const [speed, setSpeed] = useState(0)
  const [result,setResult] = useState(0)

  const handleCalculate = () =>{
    setResult(weight*speed)
  }

  return (
    <div className="Joule_div">
    <h3 style={{ color: 'white', textAlign: 'center' }}>JOULE CALCULATOR</h3>
    <label className="lab1">WEIGHT=/GRAMS</label>
    <br></br>
    <input className="weight_inp" type="text" value={weight} onChange={(e)=>setWeight(parseFloat(e.target.value))} />
    <label className="lab2">SPEED=M/S</label>
    <br></br>
    <input className="speed_inp" type="text" value={speed} onChange={(e)=>setSpeed(parseFloat(e.target.value))} />
    <button className="count_button" onClick={handleCalculate}>
      CALCULATE
    </button>
     <h1 className='Result_joule'>{result}</h1>
  </div>
  )
}

export default Joule_calc;

Answer 2

div_panel 是一個包含類名 ["Joule_div"] 的數組集合。 所以首先使用索引訪問該值。 你應該 append 只有一個節點，你的節點是“sum”而不是“Result_joule”，你不應該使用 textcontent 屬性，因為你肯定會改變你的結果值作為用戶的輸入值

Create_response(){
        console.log("creating response...")
        let sum = document.createElement("h1")
        sum.className = 'Result_joule'
        //sum.textContent = "678"

        let div_panel = document.getElementsByClassName("Joule_div")
        div_panel[0].append('sum')
    }

如果有任何問題仍然存在，請在下方評論