كيف أجعل ال input فارغ بعد الضفط على زر التسجيل

 هناك خطآن في كودك، اﻷول أنك لا تسند أي قيمة لخاصية value للـinput أي يجب أن تكون هكذا:

<input onChange={handleChange} type="text" name="username" value={state.username} />
<input onChange={handleChange} type="email" name="email" value={state.email} />
<input onChange={handleChange} type="password" name="password" value={state.password} />
<input onChange={handleChange} type="password" name="confirm_password" value={state.confirm_password} />

في حالتك من دون value تصير input ما يسمى بـuncontrolled وحينها لا يمكنك أن تعدل قيمتها برمجياً من قبل React بدون استعمال ref والذي لا يفضل استعمالها في حالتك بل يفضل تعيين قيمة value وبهذا يمكنك تغيير قيمة input بـsetState بسيطة.

الثاني في هذا الكود:

const handleChange = (e) => {
  setState((prev) => ({ ...prev, [e.target.name]: e.target.vale }));
};

اسمها e.target.value وليس e.target.vale نغيرها إلى هذا:

const handleChange = (e) => {
  setState((prev) => ({ ...prev, [e.target.name]: e.target.value }));
};

ملاحظة أخيرة: يفضل تسمية component بـSignUp بالحرف الكبير وليس signup فهذا هو العرف الشائع في مجتمع Reactjs

أنت بحاجة الى تحويل ال inputs الى controlled بمعنى أخر يجب عليك في هذه الحالة أن تتحكم في ال inputs يدويا عن طريق ربط قيمة ال state بقيمة ال input

import React, { useState } from 'react';

export default function signup() {
  const [state, setState] = useState({
    username: '',
    email: '',
    password: '',
    confirm_password: '',
  });

  const handleChange = (e) => {
    setState((prev) => ({ ...prev, [e.target.name]: e.target.vale }));
  };

  const handleSubmit = () => {
    setState({ username: '', email: '', password: '', confirm_password:'' });
  };

  return (
    <div>
      <input value={state.username} onChange={handleChange} type="text" name="username" />
      <input value={state.email} onChange={handleChange} type="email" name="email" />
      <input value={state.password} onChange={handleChange} type="password" name="password" />
      <input
        value={state.confirm_password}
        onChange={handleChange}
        type="password"
        name="confirm_password"
      />
      <button onClick={handleSubmit}>signup</button>
    </div>
  );
}

عندما يشتغل المكون لأول مرة سيكون ال input مثلا هنا 

      <input value={state.username} onChange={handleChange} type="text" name="username" />

يحمل قيمة ال username الأولية المعطاة لل state عندما يتغير ال username في ال state سيتغير أيضا داخل ال input وعند الضغط على زر التسجيل ستشتغل الدالة 

  const handleSubmit = () => {
    setState({ username: '', email: '', password: '', confirm_password:'' });
  };

والتي بدورها ستحدث القيمة داخل ال inputs