Sobes.tech
Middle

Valósítson meg keresési és szűrő funkciót egy React komponensben useState használatával. - Használja a useState-et keresési állapot és szerepkör szűrő állapot létrehozásához. - Kösse a keresési állapotot egy bemeneti mező értékéhez, és frissítse változáskor. - Kösse a szerepkör szűrő állapotot egy kiválasztó legördülő értékéhez, és frissítse változáskor. - Stílusozza a bemeneti mezőt paddinggal és betűmérettel.

sobes.tech MI

Válasz az MI-től

jsx import React, { useState } from 'react';

function SearchFilterComponent() { const [search, setSearch] = useState(''); const [roleFilter, setRoleFilter] = useState('');

return ( <div> <input type="text" value={search} onChange={e => setSearch(e.target.value)} placeholder="Keresés..." style={{ padding: '8px', fontSize: '16px' }} />

  <select
    value={roleFilter}
    onChange={e => setRoleFilter(e.target.value)}
  >
    <option value="">Minden szerep</option>
    <option value="admin">Adminisztrátor</option>
    <option value="user">Felhasználó</option>
    <option value="guest">Vendég</option>
  </select>

  {/* Itt hozzáadhatja a szűrt adatok megjelenítésének logikáját */}
</div>

); }

export default SearchFilterComponent;