Reactjs app div onclick在IE 11中无法使用，没有函数被调用。

Question

我正在做一个以reactJS为主框架的项目，使用了最新的react hooks.我有一个const函数需要在左侧的div项（子组件）上执行，它由简单的头部和一些padding类型的框组成。

以下是我的代码 函数将在父组件中被调用。

    import React from 'react'
    import PropTypes from 'prop-types'
    import classnames from 'classnames'
    import withStyles from 'react-jss'
    import * as R from 'ramda'
    import { connect } from 'react-redux'
    import CardItem from './card-item'

    const ParentComponent = ({
      classes
    }) => {
    const arrayData = [{name: "Jose", id: "1"}, {name: "Job", id: "2"}];
    const onSelect = (data) => () => {
        console.log(data)
    }

    return (<div> 
    {Array.map(item => 
     <CardItem 
      item={item}
      onclickFun={onSelect(item)}
     />,(arrayData))}
     </div>
     )
    }

    ParentComponent.propTypes = {
      classes: PropTypes.object
    }

    const styles = theme => ({
      card: {
        boxSizing: 'border-box',
        minHeight: '150px',
        width: '100%',
        borderStyle: 'solid',
        borderWidth: '1px',
      }

    })

    export default (withStyles(styles)(ParentComponent))

该卡组件代码。

            import React from 'react'
            import PropTypes from 'prop-types'
            import classnames from 'classnames'
            import withStyles from 'react-jss'
            import * as R from 'ramda'
            import { connect } from 'react-redux'

            const CardItem = ({
              classes,
              item,
              onclickFun
            }) => {
              return (
                <div className=[classes.card} onClick={onclickFun}>
                  <div className={classes.topContainer}>
                    {item.name}
                  </div>
                </div>
              )
            }

            CardItem.propTypes = {
              classes: PropTypes.object,
              item: PropTypes.object,
              onClick: PropTypes.func
            }

            const styles = theme => ({
              card: {
                boxSizing: 'border-box',
                minHeight: '150px',
                width: '100%',
                borderStyle: 'solid',
                borderWidth: '1px',
              }

            })

            export default (withStyles(styles)(CardItem))

请帮忙

Answer 1

你有一个额外的 => () 在您的onSelect函数中

替换

const onSelect = (data) => () => {
    console.log(data)
}

随着

const onSelect = (data) => {
    console.log(data)
}

另外，当你向 cardItem 添加道具时，你是在调用函数，而不是像这样传递实际的函数。

    onclickFun={() => {onSelect(item)}}

替换

 <CardItem 
   item={item}
   onclickFun={onSelect(item)}
 />

随着

 <CardItem 
    item={item}
    onclickFun={() => {onSelect(item)}}
 />

还有一点，Array.map应该直接在数组上调用，像这样

{arrayData.map(item => 
 <CardItem 
  item={item}
  onclickFun={onSelect(item)}
 />)}

我创建了一个工作的沙盒（我删除了所有的风格，以简化它 代码沙盒