리액트 - 우클릭 메뉴 구현하기(context menu)

 

https://blog.logrocket.com/creating-react-context-menu/

Creating a React context menu - LogRocket Blog

 

// context menu
const [clicked, setClicked] = useState(false);
const [points, setPoints] = useState({ x: 0, y: 0 });
const [selectedTr, setSelectedTr] = useState(null);

 

 

<tr 
    onContextMenu={ (e)=>{
        e.preventDefault();
        setClicked(true);
        setSelectedTr(e.target.parentElement);

        setPoints({ x: e.clientX, y: e.clientY });
    } } >
    <td type="productId" scope="row" className="px-3 py-4">
        { productId }
    </td>
</tr>

 

{clicked && (
    <div style={{
        position: 'absolute',
        top: points.y,
        left: points.x,
        zIndex: 100,
        width: '100px',
        backgroundColor: 'rgb(55 65 81)',
        borderRadius: '5px',
        padding: '5px',
        color: 'white',
    }}>
        <div style={{ borderBottom: '1px solid rgb(100,100,100)', cursor: 'pointer' }} onClick={ ()=>{ console.log(selectedTr) } }>메뉴 1</div>
        <div style={{ borderBottom: '1px solid rgb(100,100,100)', cursor: 'pointer' }}>메뉴 2</div>
        <div style={{ borderBottom: '1px solid rgb(100,100,100)', cursor: 'pointer' }}>메뉴 3</div>
    </div>
)}