React onChange事件获取不到synthetic event对象报错排查

报错触发的直接原因是商品下拉选择框、数量输入框的onChange回调没有透传React合成事件对象：

• 你定义的handleChange(e, i)需要接收两个参数：第一个是事件对象e，第二个是表单项索引i
• 但你实际绑定事件时写的是onChange={() => {handleChange(index)}}，既没有接收原生触发的事件对象，传参顺序也错了：此时handleChange接收到的第一个参数是数字类型的索引，第二个参数是undefined，访问e.target时自然会抛出"Cannot read properties of undefined (reading 'name')"的错误。

另外代码里还有一个隐藏bug：new Date().toISOString是函数引用，没有加括号调用，提交账单时生成日期会出错。

1. 修正商品下拉框、数量输入框的onChange绑定，透传事件对象、保证参数顺序和handleChange定义一致：

// 商品选择下拉框的onChange修改为
<select 
  className='form-select d-inline m-2' 
  name='product' 
  value={ele.product || ''} 
  style={{ width: '40%' }} 
  onChange={(e) => {handleChange(e, index)}}
>
  {/* 选项逻辑保持不变 */}
</select>

// 数量输入框的onChange修改为
<input 
  type='number' 
  className="form-control  d-inline m-2 " 
  name='quantity' 
  min="1" 
  max="99" 
  placeholder="Quantity" 
  value={ele.quantity || ""} 
  onChange={(e) => {handleChange(e, index)}}
  style={{ width: '20%' }} 
/>

2. 修复日期生成的逻辑bug，给toISOString加调用括号：

const handleSubmit = (e) => {
  e.preventDefault()
  // 原代码是new Date().toISOString.slice，漏了调用括号
  const todayDate = new Date().toISOString().slice(0, 10)
  const formData = {
    date: todayDate, customer: _id, lineItems: [...formValues]
  }
  dispatch(startCraeteBill(formData, resetForm))
  setTotal(0)
}

注：顶部客户选择用的是第三方react-select组件，它的onChange回调本身就直接返回选中的选项对象、不返回原生事件，所以现有handleId的写法是正确的，不需要修改。

改完之后下拉选商品、修改数量的交互就可以正常触发状态更新，总价计算也能同步生效。

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