ReactJS如何用onChange事件实现多输入值计算 含小费账单人均分摊

现有代码核心问题 #

• 状态双向绑定失效：handleChange函数仅做控制台打印，未将输入框的账单金额、用餐人数同步更新到对应useState状态，用户输入无法被程序读取。
• 小费选择功能不可用：自定义SelectTip组件缺失return关键字无法正常渲染，实际渲染的小费按钮未绑定点击事件，无法记录用户选择的小费比例。
• 计算逻辑完全缺失：没有实现「(账单总额 + 账单总额*小费比例) / 用餐人数 = 人均应付金额」的核心计算规则，错误将onChange事件绑定在不支持输入事件的p标签上，页面展示值和计算结果完全不匹配。
• 受控组件配置错误：Input组件未接收传入的value属性，输入框没有和状态做绑定，输入内容无法同步回显。
• 边界校验缺失：未处理用餐人数为0、输入为空、输入负数等异常场景，会出现NaN、无穷大等错误展示。

修复后完整可运行代码 #

import React, { useState, useMemo } from 'react'
import style from './BillSplitter.module.css'

const tips = [5, 10, 15, 25]

// 修复Input组件：接收value属性，绑定到输入框实现受控
const Input = ({ label, id, handleChange, name, type, placeholder, value }) => (
  <>
    <label className={style.label} htmlFor={id}>{label}</label>
    <input 
      className={style.input} 
      type={type || "number"} 
      id={id} 
      name={name || id} 
      placeholder={placeholder} 
      onChange={handleChange}
      value={value ?? 0}
      min="0"
    />
    <br />
  </>
);

function BillSplitter() {
  // 调整状态：新增selectedTip存选中的小费比例
  const [selectedTip, setSelectedTip] = useState(0)
  const [billAmount, setBillAmount] = useState(0)
  const [personAmount, setPersonAmount] = useState(0)

  // 统一处理输入变更，根据输入框name区分更新对应状态
  function handleChange(e) {
    const { name, value } = e.target;
    const numValue = Number(value) || 0;
    if (name === 'bill') {
      setBillAmount(numValue)
    }
    if (name === 'person') {
      setPersonAmount(numValue)
    }
  }

  // 处理小费选中
  function handleTipSelect(tip) {
    setSelectedTip(tip === selectedTip ? 0 : tip)
  }

  // 计算人均应付金额，自动依赖状态变更重算
  const perPersonAmount = useMemo(() => {
    // 异常场景兜底
    if (billAmount <= 0 || personAmount <=0) return 0;
    const total = billAmount * (1 + selectedTip / 100);
    // 保留两位小数
    return (total / personAmount).toFixed(2);
  }, [billAmount, personAmount, selectedTip])

  return (
    <div className={style.wrapper}>
      <div className={style.box}>
        <div className={style.top}>
          <h2 className={style.title}>Bill Splitter</h2>
          <p className={style.personBillAmount}>人均应付金额</p>
          {/* 直接展示计算好的人均值，移除无效的onChange绑定 */}
          <p className={style.totalPersonAmount}>$ {perPersonAmount}</p>
        </div>
        <div className={style.bottom}>
          <Input 
            handleChange={handleChange} 
            placeholder='请输入账单总金额' 
            label="账单金额"
            id="bill"
            name="bill"
            value={billAmount}
          />
          <Input 
            handleChange={handleChange} 
            placeholder='请输入用餐人数' 
            label="用餐人数"
            id="person"
            name="person"
            value={personAmount}
          />
          <div className={style.tipBox}>
            <p>选择小费比例</p>
            {tips.map((tip) => {
              return (
                <button 
                  key={tip}
                  className={`${style.tipButton} ${selectedTip === tip ? style.activeTip : ''}`}
                  onClick={() => handleTipSelect(tip)}
                >
                  {tip} %
                </button>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default BillSplitter

补充说明 #

• 可以在CSS文件中给.activeTip类加高亮样式，方便用户识别当前选中的小费比例。
• 代码默认做了最小值限制，输入负数会自动被拦截，所有非法输入都会按0做兜底计算，不会出现页面报错。
• 再次点击已经选中的小费按钮可以取消小费选择，按无小费场景计算。

内容的提问来源于stack exchange，提问作者GaryNJ