Question

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

除了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

你最有可能缺少填充物 - 正如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/。

`onClick`处理程序没有在IE11中触发

1 个答案: