React - JSX 中的渲染信息

Question

我正在構建一個小費計算器。 我需要在 div 元素中呈現公式計算的結果。 如果將公式直接插入 div，它會起作用，但我相信在這種情況下我必須使用 useState。 這是我使用的代碼。 你能建議如何解決它嗎？ 謝謝。

import React, { useState } from 'react';
import './Calculation.css';
import Card from './UI/Card';

const Calculation = (props) => {

    const [tipPP, setTipPP]=useState('0');
    const [totalPP, setTotalPP] = useState('0');
        
        const calcHandler =()=>{
            
            setTipPP(((props.bill * props.tip) / props.people)/100);
            setTotalPP(props.bill/props.people + tipPP)

        }
        

    return (
        <Card className='calcCard' onChange = {calcHandler}>
            <div className='calcTip' >Tip amount<span className='tipTotal' >${tipPP}</span></div>
            <div className='calcTotal'>Total<span>${totalPP}</span></div>
            <Card className='resetBtn'>Reset</Card>
        </Card>
    )
};

export default Calculation;

Answer 1

怎么樣 ：

import React, { useState, useEffect } from 'react';
import './Calculation.css';
import Card from './UI/Card';

const Calculation = (props) => {

    const [tipPP, setTipPP]=useState('0');
    const [totalPP, setTotalPP] = useState('0');
        
        const calcHandler =(e)=>{
            e.preventDefault();
            setTipPP(((props.bill * props.tip) / props.people)/100);
            setTotalPP(props.bill/props.people + tipPP)

        }
        
     useEffect(() => {
         console.log("tipPP changed!");
     }, [tipPP]);

    return (
        <Card className='calcCard' onChange = {(e) => calcHandler()}>
            <div className='calcTip' >Tip amount<span className='tipTotal' >${tipPP}</span></div>
            <div className='calcTotal'>Total<span>${totalPP}</span></div>
            <Card className='resetBtn'>Reset</Card>
        </Card>
    )
};

export default Calculation;

useEffect 會在 tipPP 的值改變時重新渲染組件。 請試試這個。