Reactjs приложение div onclick не работает в IE 11 функция не вызывается - PullRequest
Новая
       66

Reactjs приложение div onclick не работает в IE 11 функция не вызывается

0 голосов
/ 06 мая 2020

Я работаю над проектом с 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))

Пожалуйста, помогите

1 Ответ

0 голосов
/ 06 мая 2020

У вас есть дополнительный => () в вашей функции 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)}
 />)}

Я создал рабочую песочницу (я удалил все стили, чтобы упростить ее) Песочница кода

...