如何在react中确认密码以更改密码并在api中发布？

import React, { useState } from 'react';

const ChangePasswordForm = () => {
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = () => {
    if (newPassword !== confirmPassword) {
      setError('新密码和确认密码不一致');
      return;
    }

    // 发送密码更改请求到API
    fetch('/api/change-password', {
      method: 'POST',
      body: JSON.stringify({ oldPassword, newPassword }),
      headers: {
        'Content-Type': 'application/json',
      },
    })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          // 密码更改成功
          setError('');
          setOldPassword('');
          setNewPassword('');
          setConfirmPassword('');
        } else {
          // 密码更改失败
          setError('密码更改失败');
        }
      })
      .catch(error => {
        setError('发生错误，请稍后再试');
      });
  };

  return (
    <div>
      <h2>更改密码</h2>
      {error && <p>{error}</p>}
      <input
        type="password"
        placeholder="旧密码"
        value={oldPassword}
        onChange={e => setOldPassword(e.target.value)}
      />
      <input
        type="password"
        placeholder="新密码"
        value={newPassword}
        onChange={e => setNewPassword(e.target.value)}
      />
      <input
        type="password"
        placeholder="确认密码"
        value={confirmPassword}
        onChange={e => setConfirmPassword(e.target.value)}
      />
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
};

export default ChangePasswordForm;