使用Reactjs将表单数据存储到google sheet

npm install googleapis

import { google } from 'googleapis';

const submitForm = async () => {
  try {
    const auth = new google.auth.GoogleAuth({
      keyFile: 'path/to/your/credentials.json',
      scopes: ['https://www.googleapis.com/auth/spreadsheets'],
    });

    const client = await auth.getClient();
    const sheets = google.sheets({ version: 'v4', auth: client });

    const spreadsheetId = 'your-spreadsheet-id';
    const range = 'Sheet1!A1:B1'; // 适应你的表格结构

    const values = [
      [formData.field1, formData.field2], // 适应你的表单字段
    ];

    const resource = {
      values,
    };

    const response = await sheets.spreadsheets.values.append({
      spreadsheetId,
      range,
      valueInputOption: 'USER_ENTERED',
      resource,
    });

    console.log('Data stored successfully:', response.data);
  } catch (error) {
    console.error('Error storing data:', error);
  }
};

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

// 在表单元素中添加onChange事件处理程序
<input type="text" name="field1" value={formData.field1} onChange={handleChange} />
<input type="text" name="field2" value={formData.field2} onChange={handleChange} />

<button onClick={submitForm}>提交</button>