怎么实现表单项间的联动？

表单项的联动，是指一个表单字段的值或状态变化时，动态影响其他表单字段的值、显示或验证状态。

1. 基于状态管理的表单联动

使用状态管理来实现表单项联动是最常见的方法之一，特别是使用像 React、Vue 等框架时，可以利用其组件的响应式特性，动态更新表单项。

React 实现示例

import React, { useState } from 'react';

function Form() {
  const [formData, setFormData] = useState({
    country: '',
    city: '',
    postalCode: '',
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  // Example: Cities are dependent on the selected country
  const cities = formData.country === 'USA' ? ['New York', 'Los Angeles'] : ['Tokyo', 'Osaka'];

  return (
    <form>
      <label>
        Country:
        <select name="country" value={formData.country} onChange={handleInputChange}>
          <option value="">Select</option>
          <option value="USA">USA</option>
          <option value="Japan">Japan</option>
        </select>
      </label>

      <label>
        City:
        <select name="city" value={formData.city} onChange={handleInputChange}>
          <option value="">Select</option>
          {cities.map((city) => (
            <option key={city} value={city}>
              {city}
            </option>
          ))}
        </select>
      </label>

      <label>
        Postal Code:
        <input
          name="postalCode"
          value={formData.postalCode}
          onChange={handleInputChange}
          disabled={!formData.city} // Disable postal code field if no city is selected
        />
      </label>
    </form>
  );
}

export default Form;

思路：

1. 状态管理：通过 React 的 useState 进行表单状态的管理。所有表单数据保存在 formData 中。
2. 联动逻辑：当 country 选择变化时，动态改变 city 下拉选项的内容。比如当 country 选择为 USA 时，城市选项动态变为纽约和洛杉矶。
3. 禁用逻辑：邮政编码输入框的 disabled 属性依赖于城市是否选择，从而实现输入框禁用/启用的联动。

2. 使用事件监听进行表单联动

你也可以直接通过监听表单字段的 change 事件，在事件回调中实现表单项之间的联动。

实现示例

<form id="myForm">
  <label>
    Country:
    <select id="country">
      <option value="">Select</option>
      <option value="USA">USA</option>
      <option value="Japan">Japan</option>
    </select>
  </label>

  <label>
    City:
    <select id="city" disabled>
      <option value="">Select</option>
    </select>
  </label>

  <label>
    Postal Code:
    <input type="text" id="postalCode" disabled />
  </label>
</form>

<script>
  const country = document.getElementById('country');
  const city = document.getElementById('city');
  const postalCode = document.getElementById('postalCode');

  const cities = {
    USA: ['New York', 'Los Angeles'],
    Japan: ['Tokyo', 'Osaka'],
  };

  country.addEventListener('change', function () {
    const selectedCountry = country.value;
    city.innerHTML = '<option value="">Select</option>'; // 清空城市选项

    if (selectedCountry) {
      cities[selectedCountry].forEach((cityName) => {
        const option = document.createElement('option');
        option.value = cityName;
        option.textContent = cityName;
        city.appendChild(option);
      });

      city.disabled = false;
    } else {
      city.disabled = true;
    }

    postalCode.disabled = true; // 清空时禁用邮政编码
  });

  city.addEventListener('change', function () {
    if (city.value) {
      postalCode.disabled = false;
    } else {
      postalCode.disabled = true;
    }
  });
</script>

思路：

1. 事件监听：为 country 和 city 下拉框添加 change 事件监听器。
2. 联动逻辑：当 country 改变时，重新生成 city 的选项，并启用或禁用 city 和 postalCode。
3. 手动 DOM 操作：通过 DOM 操作动态添加或移除选项，实现表单字段之间的联动。

3. 使用 Vue 实现表单联动

Vue 的响应式数据绑定功能非常适合实现表单联动。

Vue 实现示例

<template>
  <form>
    <label>
      Country:
      <select v-model="formData.country" @change="updateCities">
        <option value="">Select</option>
        <option value="USA">USA</option>
        <option value="Japan">Japan</option>
      </select>
    </label>

    <label>
      City:
      <select v-model="formData.city" :disabled="cities.length === 0">
        <option value="">Select</option>
        <option v-for="city in cities" :key="city" :value="city">{{ city }}</option>
      </select>
    </label>

    <label>
      Postal Code:
      <input v-model="formData.postalCode" :disabled="!formData.city" />
    </label>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        country: '',
        city: '',
        postalCode: '',
      },
      cities: [],
    };
  },
  methods: {
    updateCities() {
      const cityData = {
        USA: ['New York', 'Los Angeles'],
        Japan: ['Tokyo', 'Osaka'],
      };
      this.cities = cityData[this.formData.country] || [];
      this.formData.city = ''; // 重置城市选择
      this.formData.postalCode = ''; // 重置邮政编码
    },
  },
};
</script>

思路：

• Vue 的双向绑定：通过 v-model 绑定表单项的值，实现表单数据的双向绑定。
• 响应式数据：通过改变 country 的值，自动更新 cities 列表，从而实现城市的联动。
• 禁用属性：使用条件来禁用或启用某些表单项。

题目要点：

• 状态管理：在框架（如 React、Vue）中，通过使用 useState 或 data 来管理表单的状态，实现表单项之间的联动。
• 事件监听：使用原生 JavaScript 可以通过事件监听的方式来手动实现表单的联动。
• 禁用/启用：通过联动时动态调整表单项的禁用状态、可选内容、验证规则等，可以提升表单的交互体验。