时间戳

首页 > 解决方案 > Reactjs app div onclick在IE 11中不起作用没有调用函数

javascript - Reactjs app div onclick在IE 11中不起作用没有调用函数

问题描述

我正在以 reactJS 作为主要框架并使用最新的反应钩子进行项目。我有一个 const 函数需要在左侧的 div 项（子组件）上执行，它由简单的头部和一些填充类型的框组成。

这是我的代码函数将在父组件中调用

    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))

请帮忙

标签： javascriptreactjsparameter-passingreact-hooksarrow-functions

解决方案

=> ()你的 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)}
 />)}

我创建了一个工作沙箱（我删除了所有样式以简化它） 代码沙箱

推荐阅读