如何通过按钮将账单地址数据同步至收货地址表单？

1. 新增复制地址的处理函数 #

在组件内部添加函数，将账单地址内容同步到收货地址，注意保留收货地址自身的_id和type专属字段：

const handleCopyAddress = () => {
  setShippingAddress({
    ...shippingAddress, // 保留原有专属字段
    ...bilingAddress, // 覆盖可同步的表单字段
    type: 'Shipping' // 确保收货地址类型不会被覆盖
  });
};

2. 添加触发按钮 #

在收货地址标题下方添加按钮，供用户触发复制操作：

<div className='form'>
  <h2 className='mb-3'>**Shipping address**</h2>
  {/* 新增复制按钮 */}
  <button 
    onClick={handleCopyAddress}
    disabled={isView}
    className='mb-3'
  >
    从账单地址复制
  </button>
  {/* 原有表单内容 */}
  <div>
    <Row>
      {/* ... 原有输入框代码 ... */}
    </Row>
  </div>
</div>

完整修正后的组件代码 #

const Details = ({ handleNext, entityType }) => {
  const [bilingAddress, setBilingAddress] = useState({
    _id: '',
    type: 'Billing',
    flatNumber: '',
    addressLine1: '',
    addressLine2: '',
    addressLine3: '',
    postcode: '',
    state: '',
    city: '',
    country: '',
    mobile: '',
    telephone: '',
    fax: '',
    email: '',
  });
  const [shippingAddress, setShippingAddress] = useState({
    _id: '',
    type: 'Shipping',
    flatNumber: '',
    addressLine1: '',
    addressLine2: '',
    addressLine3: '',
    postcode: '',
    state: '',
    city: '',
    country: '',
    mobile: '',
    telephone: '',
    fax: '',
    email: '',
  });

  // 新增复制地址函数
  const handleCopyAddress = () => {
    setShippingAddress({
      ...shippingAddress,
      ...bilingAddress,
      type: 'Shipping'
    });
  };

  const handleChange = (e, name, type) => {
    if (type === 'biling') {
      if (["flatNumber", "addressLine1", "addressLine2", "addressLine3", "state", "city", "country", "email"].includes(name)) {
        setBilingAddress({ ...bilingAddress, [name]: e.target.value });
      } else if (["mobile", "telephone", "fax", "postcode"].includes(name)) {
        if (e.target.value === '' || numberReg.test(e.target.value)) {
          setBilingAddress({ ...bilingAddress, [name]: e.target.value });
        }
      }
    } else if (type === 'shipping') {
      if (["flatNumber", "addressLine1", "addressLine2", "addressLine3", "state", "city", "country", "email"].includes(name)) {
        setShippingAddress({ ...shippingAddress, [name]: e.target.value });
      } else if (["postcode", "mobile", "telephone", "fax"].includes(name)) {
        if (e.target.value === '' || numberReg.test(e.target.value)) {
          setShippingAddress({ ...shippingAddress, [name]: e.target.value });
        }
      }
    }
  };

  return (
    <>
      <div>
        <h2 className='mb-3'>**Billing address**</h2>
        <Row>
          <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
            <TextField
              label="Flat number"
              variant="standard"
              color="warning"
              value={bilingAddress.flatNumber}
              onChange={(e) => handleChange(e, 'flatNumber', 'biling')}
              disabled={isView} />
          </Col>
          <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
            <TextField
              label="Line 1"
              variant="standard"
              color="warning"
              value={bilingAddress.addressLine1}
              onChange={(e) => handleChange(e, 'addressLine1', 'biling')}
              disabled={isView}  />
          </Col>
          <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
            <TextField
              label="Line 2"
              variant="standard"
              color="warning"
              value={bilingAddress.addressLine2}
              onChange={(e) => handleChange(e, 'addressLine2', 'biling')}
              disabled={isView} />
          </Col>
        </Row>
      </div>

      <div className='form'>
        <h2 className='mb-3'>**Shipping address**</h2>
        {/* 新增复制按钮 */}
        <button 
          onClick={handleCopyAddress}
          disabled={isView}
          className='mb-3'
        >
          从账单地址复制
        </button>
        <div>
          <Row>
            <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
              <TextField
                label="Flat number"
                variant="standard"
                color="warning"
                value={shippingAddress.flatNumber}
                onChange={(e) => handleChange(e, 'flatNumber', 'shipping')}
                disabled={isView} />
            </Col>
            <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
              <TextField
                label="Line 1"
                variant="standard"
                color="warning"
                value={shippingAddress.addressLine1}
                onChange={(e) => handleChange(e, 'addressLine1', 'shipping')}
                disabled={isView} />
            </Col>
            <Col xxl={3} xl={4} lg={6} md={4} sm={6} className='mb-3'>
              <TextField
                label="Line 2"
                variant="standard"
                color="warning"
                value={shippingAddress.addressLine2}
                onChange={(e) => handleChange(e, 'addressLine2', 'shipping')}
                disabled={isView} />
            </Col>
          </Row>
        </div>
      </div>
    </>
  );
};

注意点 #

• 复制操作保留了收货地址的_id和type字段，避免覆盖专属标识
• 按钮添加了disabled={isView}属性，和表单输入框保持一致的禁用状态
• 修正了原代码中的拼写错误：hendelNext改为handleNext，补全了handleChange函数的声明

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