如何从表单处理更改App.js的状态？

import React, { useState } from 'react';

function App() {
  const [formData, setFormData] = useState({});

  // 其他代码...

  return (
    // JSX代码...
  );
}

export default App;

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

return (
  <form>
    <label>
      用户名：
      <input
        type="text"
        name="username"
        value={formData.username || ''}
        onChange={handleInputChange}
      />
    </label>
    {/* 其他表单元素 */}
    <button type="submit">提交</button>
  </form>
);

return (
  <div>
    {formData.username && <p>欢迎，{formData.username}！</p>}
    {/* 其他内容 */}
  </div>
);