如何在 es6 模块上调用函数

Question

我尝试了很多东西，但都没有奏效。我没有在这个项目中使用反应，所以不确定单击按钮时如何调用 shoeAlert() 函数。请帮忙！！

import '../Nav/nav.styles.scss';

const Nav = () =>  {
    
    function showAlert(e) {
        e.preventDefault();
        console.log("I'm an alert");
    };
   return ( `
        <div class='nav'>
            <div>
                <p>Logo</p>
                <button id='btn' onclick="{this.showAlert}"> Click Me</button>
            </div>
        </div> `);
} 
 
export { Nav };

Answer 1

创建并返回父 .nav 元素，而不是返回 HTML 字符串。您可以在返回之前将侦听器附加到内部按钮。

const Nav = () => {
    function showAlert(e) {
        e.preventDefault();
        console.log("I'm an alert");
    };
    const nav = document.createElement('div');
    nav.className = 'nav';
    nav.innerHTML = `
        <div>
            <p>Logo</p>
            <button id='btn'> Click Me</button>
        </div>
    `;
    nav.querySelector('button').addEventListener('click', showAlert);
    return nav;
};

工作sn-p：

const Nav = () => {
    function showAlert(e) {
        e.preventDefault();
        console.log("I'm an alert");
    };
    const nav = document.createElement('div');
    nav.className = 'nav';
    nav.innerHTML = `
        <div>
            <p>Logo</p>
            <button id='btn'> Click Me</button>
        </div>
    `;
    nav.querySelector('button').addEventListener('click', showAlert);
    return nav;
};

const nav = Nav();
document.body.appendChild(nav);

showAlert也是一个独立的标识符，不是任何实例的属性，所以你不需要this.showAlert，你只需要showAlert。