在ReactJs中添加两个值并将其发送到服务器

import React, { useState } from 'react';

function MyComponent() {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    if (name === 'value1') {
      setValue1(value);
    } else if (name === 'value2') {
      setValue2(value);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 在这里将值发送到服务器
    // 可以使用fetch或axios等库发送POST请求
    // 例如：
    fetch('/api/submit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ value1, value2 }),
    })
      .then((response) => response.json())
      .then((data) => {
        // 处理服务器返回的响应
      })
      .catch((error) => {
        // 处理错误
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Value 1:
        <input
          type="text"
          name="value1"
          value={value1}
          onChange={handleInputChange}
        />
      </label>
      <br />
      <label>
        Value 2:
        <input
          type="text"
          name="value2"
          value={value2}
          onChange={handleInputChange}
        />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyComponent;