如何获取多个复选框值并在react原生中更新到服务器

import React, { useState } from 'react';

function CheckboxForm() {
  const [checkboxValues, setCheckboxValues] = useState([]);

  // 复选框值改变时的处理函数
  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    const isChecked = event.target.checked;

    if (isChecked) {
      // 添加选中的值到数组中
      setCheckboxValues([...checkboxValues, value]);
    } else {
      // 从数组中移除取消选中的值
      setCheckboxValues(checkboxValues.filter((item) => item !== value));
    }
  };

  // 提交表单时的处理函数
  const handleSubmit = (event) => {
    event.preventDefault();

    // 将复选框的值发送到服务器
    // 可以使用fetch或axios等库发送HTTP请求
    // 以下是一个示例使用fetch发送POST请求的代码
    fetch('http://example.com/api/update', {
      method: 'POST',
      body: JSON.stringify(checkboxValues),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then((response) => response.json())
      .then((data) => {
        // 处理服务器返回的响应数据
        console.log(data);
      })
      .catch((error) => {
        // 处理请求错误
        console.error(error);
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input
          type="checkbox"
          value="value1"
          checked={checkboxValues.includes('value1')}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="checkbox"
          value="value2"
          checked={checkboxValues.includes('value2')}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>
      {/* 添加更多复选框... */}
      <button type="submit">提交</button>
    </form>
  );
}

export default CheckboxForm;