如何将签名Canvas的Data URL向上传递至React父组件

1. 简化父组件（ModalWithForm）状态管理 #

父组件只需要维护signatureImage状态，并把更新状态的方法直接传给子组件，没必要搞多余的onChange或signatureData props，逻辑更清晰：

import { useState } from 'react';
import AddNameModal from './AddNameModal';

const ModalWithForm = () => {
  const [signatureImage, setSignatureImage] = useState(null);

  // 表单提交逻辑
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!signatureImage) {
      alert('请先完成签名');
      return;
    }
    // 调用API发送签名数据
    try {
      await fetch('/api/submit-signature', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ signature: signatureImage })
      });
      // 提交后可做关闭模态框、重置状态等操作
    } catch (err) {
      console.error('提交失败:', err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        {/* 其他表单字段放这 */}
        <AddNameModal setSignatureImage={setSignatureImage} />
        <button type="submit">提交表单</button>
      </form>
    </div>
  );
};

export default ModalWithForm;

2. 子组件（AddNameModal）专注签名数据获取 #

子组件只负责从Canvas拿到Data URL，然后用父组件传过来的setSignatureImage直接更新父状态，不用自己存状态：

import SignatureCanvas from 'react-signature-canvas';
import { useRef } from 'react';

const AddNameModal = ({ setSignatureImage }) => {
  const sigCanvasRef = useRef(null);

  // 确认签名时传递数据给父组件
  const handleSaveSignature = () => {
    if (sigCanvasRef.current) {
      const dataUrl = sigCanvasRef.current.toDataURL('image/png');
      setSignatureImage(dataUrl);
    }
  };

  // 清空签名时同步更新父状态
  const handleClearSignature = () => {
    if (sigCanvasRef.current) {
      sigCanvasRef.current.clear();
      setSignatureImage(null);
    }
  };

  return (
    <div className="signature-modal">
      <SignatureCanvas ref={sigCanvasRef} canvasProps={{ width: 400, height: 200 }} />
      <div className="signature-buttons">
        <button onClick={handleClearSignature}>清空</button>
        <button onClick={handleSaveSignature}>确认签名</button>
      </div>
    </div>
  );
};

export default AddNameModal;

3. 核心注意点 #

• 状态统一由父组件管理，子组件不要重复存signatureImage，避免状态不一致
• 调用toDataURL前先判断Canvas实例是否存在，防止报错
• 表单提交前一定要校验signatureImage是否存在，别传空数据
• 如果要实时同步签名（比如画完就更新），可以把handleSaveSignature绑到Canvas的onEnd事件上，不用点确认按钮

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