`onClick` 处理程序未在 IE11 中触发

Question

我正在构建我的第一个 GatsbyJS 项目，并有一个简单的页面，该页面根据用户单击的活动按钮（“currentPage”）呈现内容。活动按钮保持在组件状态。

该页面在除 IE11 之外的所有主要浏览器中都能正常工作。我想知道我是否需要一个 polyfill（或其他东西）才能让它工作？

感谢您提供任何信息！

// handler in parent component
handlePageChange (e) {
  e.preventDefault()
  this.setState({
    currentPage: e.target.value
  })
}

// render of parent component
render () {
  return (
    <div className={styles.clientsRightsContainer}>
      <Buttons
        a={{ label: 'Label A', onClick: this.handlePageChange, value: 'pageA' }}
        b={{ label: 'Label B', onClick: this.handlePageChange, value: 'pageB' }}
    />
}

...

// handler gets passed down to child component Buttons via `a` and `b` props
const Buttons = ({ a, b }) => (
  <div className={styles.container}>
    <button onClick={a.onClick} value={a.value}>{a.label}</button>
    <button onClick={a.onClick} value={b.value}>{b.label}</button>
  </div>
)
export default Buttons

Answer 1

您很可能缺少 polyfill - 正如此处建议的 https://github.com/facebook/react/issues/8877。

通过这个安装它：

npm install --save-dev babel-polyfill

来自文档：

如果您在应用程序的条目中使用 ES6 的导入语法 点，您应该改为在条目顶部导入 polyfill 确保首先加载 polyfill：import "babel-polyfill";

有关文档和使用，请参阅此https://babeljs.io/docs/usage/polyfill/。