javascript - 内联箭头函数点击监听器

Question

这是我的 html 代码:

<button id ="btn-birthdate" class = "mdc-icon-button material-icons" >
    <i class="material-icons" >stop</i>
</button>

这是我的 JavaScript 代码

const displayExtraUserInfo  = (userInfo) => {
    const btn = () => {
        document.querySelector('btn-birthdate').onclick = displayBirthdate(UserInfo);
    }
}

但我不断收到消息

You have not created the onclick listener for the btn-birthdate as specified

...当我在 Sapio 中运行时

我正在尝试解决问题

Create a displayExtraUserInfo arrow function. It should take in a single parameter. It should then:

Add an inline arrow function click listener to the BUTTON with id of btn-birthdate. The listener should make a call to displayBirthdate and pass in the parameter displayExtraUserInfo received

Answer 1

在 onclick 赋值中，您当前立即执行 displayBirthdate，而不是赋值函数。

所以改变

.onclick = displayBirthdate(UserInfo)

至:

.onclick = () => displayBirthdate(UserInfo)

另一方面，在定义 btn 函数后，您永远不会调用它。要么添加一个调用 btn() ，要么根本不定义该函数，而只内联执行其代码。

选择器也有问题。您正在选择一个标签名称为 btn-birthdate 的元素，但您应该通过 id 选择。 #btn-生日。

还有一个错误:userInfo 的拼写应该一致，否则你正在处理另一个变量。

所以最终的解决方案是:

const displayExtraUserInfo = (userInfo) => {
    document.querySelector('#btn-birthdate').onclick = () => displayBirthdate(userInfo);
}

最后，问题表明您正在寻找一个按钮。尽管元素 ID 应该是唯一的，但您可以在选择器中添加 button:

const displayExtraUserInfo = (userInfo) => {
    document.querySelector('button#btn-birthdate').onclick = () => displayBirthdate(userInfo);
}