Question

我正在编写我的第一个反应应用程序，我的ESLINT告诉我，我不应该在JSX道具上使用.bind（）。我知道这是因为bind正在创建新功能，因此会对性能产生负面影响。但是我不知道如何重构这个来消除这个错误。

如何在不使用绑定的情况下将我单击的元素传递给函数？

ForecastPage.jsx：

// @flow

import React from 'react'
import PropTypes from 'prop-types'
import { DropdownButton, MenuItem } from 'react-bootstrap'

type Props = {
  options: Object,
  onSelect: Function,
  title: string,
  keyName: string,
  id: string,
}

const DropdownSelector = ({ title, options, keyName, id, onSelect }: Props) =>
  <div className="content">
    <div className="btn-group">
      <DropdownButton
        bsStyle={'primary'}
        title={title}
        key={keyName}
        id={id}
      >
        {options.map(element =>
          <MenuItem
            key={element.name}
            eventKey={element.name}
            // eslint-disable-next-line
            onClick={onSelect.bind(null, element)}
          >
            {element.name}
          </MenuItem>,
          )
        }
      </DropdownButton>
    </div>
  </div>


DropdownSelector.defaultProps = {
  id: null,
}

DropdownSelector.propTypes = {
  options: PropTypes.instanceOf(Object).isRequired,
  title: PropTypes.string.isRequired,
  onSelect: PropTypes.func.isRequired,
  keyName: PropTypes.string.isRequired,
  id: PropTypes.string,
}

export default DropdownSelector

DropdownSelector.jsx

grealpath

Answer 1

你也可以使用箭头功能来完成同样的事情，比如

onClick={(event) => this.props.onSelect(null, element)}

但是，它提到的潜在负面性能问题也是如此。 React文档在这方面非常好，并列举了您的选择及其职责和缺点：https://facebook.github.io/react/docs/handling-events.html

更新为this.props.onSelect，忘记您将其作为道具传递，而不是在组件本身上定义它。如果你没有使用事件对象，也许只需使用
```
onClick={() => this.props.onSelect(null, element)}
```

Answer 2

尝试亚历克斯的答案，但只需选择，而不是＆＃39;这个＆＃39;。

传递onClick函数：[ESLINT] JSX道具不应该使用.bind（）（react / jsx-no-bind）

2 个答案: