在react的下拉列表中更新/编辑用户名

import React, { useState } from 'react';

const UserDropdown = () => {
  const [selectedUser, setSelectedUser] = useState('');
  const users = ['User1', 'User2', 'User3']; // 可选的用户名数组

  const handleUserChange = (event) => {
    setSelectedUser(event.target.value);
  };

  const handleUsernameChange = (event) => {
    setSelectedUser(event.target.value);
  };

  return (
    <div>
      <select value={selectedUser} onChange={handleUserChange}>
        <option value="">请选择用户名</option>
        {users.map((user) => (
          <option key={user} value={user}>
            {user}
          </option>
        ))}
      </select>
      {selectedUser && (
        <div>
          <input type="text" value={selectedUser} onChange={handleUsernameChange} />
          <button>保存</button>
        </div>
      )}
    </div>
  );
};

export default UserDropdown;