React正在对选中复选框项的价格进行求和

import React, { useState } from 'react';

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

  const handleCheckboxChange = (price, isChecked) => {
    if (isChecked) {
      setSum(sum + price);
    } else {
      setSum(sum - price);
    }
  };

  return (
    <div>
      <label>
        <input type="checkbox" onChange={(e) => handleCheckboxChange(10, e.target.checked)} />
        Item 1 ($10)
      </label>
      <br />
      <label>
        <input type="checkbox" onChange={(e) => handleCheckboxChange(20, e.target.checked)} />
        Item 2 ($20)
      </label>
      <br />
      <label>
        <input type="checkbox" onChange={(e) => handleCheckboxChange(30, e.target.checked)} />
        Item 3 ($30)
      </label>
      <br />
      <p>Total: ${sum}</p>
    </div>
  );
};

export default CheckboxSum;