const { useState, useEffect, useRef } = React; const useSetState = (initialState = []) => { const [state, setState] = useState(new Set(initialState)); const add = (item) => setState(state => new Set(state.add(item))); const remove = (item) => setState(state => { state.delete(item); return new Set(state); }); return { set: state, add, remove, has: char => state.has(char) }; } const useSound = (url) => { const sound = useRef(new Audio(url)); return { play: () => sound.current.play(), stop: () => { sound.current.pause(); sound.current.currentTime = 0; } } }; const Key = ({ char, span, active }: { char: string, span?: boolean, active: boolean}) => { return (

{char}

) } const Column = ({ children }) => (

{children}

); const Row = ({ children }) => (

{children}

); const Keyboard = () => { // Mechanical click sound 😎 const { play, stop } = useSound('https://cdn.yoavik.com/codepen/mechanical-keyboard/keytype.mp3'); const { add, remove, has } = useSetState([]); useEffect(() => { document.addEventListener('keydown', e => { add(e.key); stop(); play(); }); document.addEventListener('keyup', e => remove(e.key)); }, []); const keys = (chars: string[], spans: boolean[] = []) => chars.map((char, i) => ( )); return (

{keys(['7', '8', '9'])} {keys(['4', '5', '6'])} {keys(['1', '2', '3'])} {keys(['0', '.'], [true, false])} {keys(['+', '-'], [true, true])}

); } ReactDOM.render( , document.body );

作品预览「CSS机械键盘(React)」