ReactJS 合并统一表单onChange事件处理函数实现方案

你现在写的大量重复内联函数逻辑本质完全一致：拿到输入值，更新对象state里的对应字段，只要把字段和输入框做绑定，就能把所有逻辑抽成单个通用函数，两步就能改完。

第一步：定义通用处理函数 #

核心逻辑是从事件对象里拿到当前触发变更的输入框标识和输入值，直接更新对应state字段即可：

const handleFacilityChange = (e) => {
  // 解构当前输入框的name属性（对应state字段名）和输入值
  const { name, value } = e.target;
  setFacility(prevState => ({
    ...prevState,
    // 用计算属性动态设置要更新的字段
    [name]: value
  }));
};

如果需要处理数字类型字段（比如经纬度、邮编），可以加个简单的类型适配，不用给每个字段单独写判断逻辑：

const handleFacilityChange = (e) => {
  const { name, value, dataset } = e.target;
  // 给数字输入框加data-type="number"标记，这里自动做类型转换
  const formattedValue = dataset.type === 'number' ? Number(value) : value;
  setFacility(prevState => ({
    ...prevState,
    [name]: formattedValue
  }));
};

第二步：修改表单项，绑定统一处理函数 #

给每一个Form.Control组件加name属性，属性值必须和facility state里的字段名完全一致（大小写敏感），然后把原来写的内联onChange全替换成上面定义的handleFacilityChange就行。

举个改完的代码片段示例：

<Row className="mb-3">
  <Col>
    <Form.Label>Location Name</Form.Label>
    <Form.Control
      type="text"
      placeholder="Location's Name"
      name="Name"
      onChange={handleFacilityChange}
    />
  </Col>

  <Col>
    <Form.Label>Latitude</Form.Label>
    <Form.Control
      type="number"
      placeholder="Enter Latitude"
      name="Latitude"
      data-type="number"
      onChange={handleFacilityChange}
    />
  </Col>

  <Col>
    <Form.Label>Longitude</Form.Label>
    <Form.Control
      type="number"
      placeholder="Enter Longitude"
      name="Longitude"
      data-type="number"
      onChange={handleFacilityChange}
    />
  </Col>
</Row>

剩下的表单项按同样规则修改即可：

• 描述字段加name="Description"
• 第一行地址加name="AddressLineOne"
• 第二行地址加name="AddressLineTwo"
• 城市、州、邮编分别加name="City"、name="State"、name="ZipCode"，需要存数字类型的邮编就加data-type="number"标记

注意点 #

• 你原代码里写的type="float"是无效值，HTML原生input没有float类型，输入数字统一用type="number"即可
• name属性值必须和state字段名完全匹配，不然会出现字段更新错位、或者往state里新增多余字段的问题
• 后续新增表单项只要加对应的name属性，直接绑定这个统一处理函数就行，不用再重复写新的onChange逻辑

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