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

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

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

ForecastPage.jsx：

import React from 'react'
import api from '../shared/api'
import ForecastBox from './ForecastBox'
import DropdownSelector from './DropdownSelector'

const regions = [
  {
    name: 'Santa Cruz',
    id: '2958',
    spots:
    [
      { name: 'Steamer Lane', id: '4188' },
      { name: 'Four Mile', id: '5023' },
      { name: 'Waddell Creek', id: '5021' },
      { name: 'Mitchell\'s Cove', id: '5028' },
      { name: '26th Ave', id: '5030' },
    ],
  },
  {
    name: 'North Orange Country',
    id: '2143',
    spots:
    [
      { name: 'Newport', id: '1241' },
      { name: 'HB', id: '3421' },
    ],
  },
]

class ForecastPage extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      selectedRegion: null,
      selectedSpot: null,
      forecast: null,
    }

    this.regionSpotList = regions
    this.updateSpot = this.updateSpot.bind(this)
    this.updateRegion = this.updateRegion.bind(this)
  }

  updateRegion(region) {
    this.setState({
      selectedRegion: region,
      forecast: null,
    })

    api.fetchSpot(region.id)
    .then((forecast) => {
      this.setState({
        forecast,
      })
    })
  }

  updateSpot(spot) {
    this.setState({
      selectedSpot: spot,
      forecast: null,
    })

    api.fetchSpot(spot.id)
    .then((forecast) => {
      this.setState({
        forecast,
      })
    })
  }

  render() {
    return (
      <div>
        <div className="container-fluid row region-spot-select">
          <DropdownSelector
            options={this.regionSpotList}
            onSelect={this.updateRegion}
            title={this.state.selectedRegion == null ? 'Select Your Region' : this.state.selectedRegion.name}
            keyName={'region-selector'}
            id={'region-selector-dropdown'}
          />
          {this.state.selectedRegion != null &&
            <DropdownSelector
              options={this.state.selectedRegion.spots}
              onSelect={this.updateSpot}
              title={this.state.selectedSpot == null ||
              !this.state.selectedRegion.spots.includes(this.state.selectedSpot) ?
              'Select A Spot' :
              this.state.selectedSpot.name}
              keyName={'spot-selector'}
              id={'spot-selector-dropdown'}
            />
          }
        </div>
        <div>
          {!this.state.forecast ?
            <div>
              Select A Region
            </div>
          : <ForecastBox forecast={this.state.forecast} /> }
        </div>
      </div>
    )
  }
}

export default ForecastPage

从“React”导入React
从“../shared/api”导入api
从“./ForecastBox”导入ForecastBox
从“./DropdownSelector”导入DropdownSelector
常量区域=[
{
名称：“圣克鲁斯”，
id:'2958'，
地点：
[
{name:'Steamer Lane'，id:'4188'}，
{name:'Four Mile'，id:'5023'}，
{name:'Waddell Creek'，id:'5021'}，
{name:'Mitchell's Cove'，id:'5028'}，
{name:'26th Ave'，id:'5030'}，
],
},
{
名称：“北橙之乡”，
id:'2143'，
地点：
[
{name:'Newport'，id:'1241'}，
{name:'HB'，id:'3421'}，
],
},
]
类ForecastPage扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
selectedRegion:空，
selectedSpot:null，
预测：空，
}
this.regionSpotList=区域
this.updateSpot=this.updateSpot.bind（this）
this.updateRegion=this.updateRegion.bind（this）
}
更新区域（区域）{
这是我的国家({
选定区域：区域，
预测：空，
})
api.fetchSpot（region.id）
。然后（（预测）=>{
这是我的国家({
预测,，
})
})
}
更新spot（spot）{
这是我的国家({
selectedSpot:spot，
预测：空，
})
api.fetchSpot（spot.id）
。然后（（预测）=>{
这是我的国家({
预测,，
})
})
}
render（）{
返回(
{this.state.selectedRegion！=null&&
}
{！这是国家预报吗？
选择一个区域
:  }
)
}
}
导出默认预测页面

DropdownSelector.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

/@flow
从“React”导入React
从“道具类型”导入道具类型
从“react bootstrap”导入{DropdownButton，MenuItem}
类型道具={
选项：对象，
onSelect：函数，
标题：字符串，
关键字名称：字符串，
id:string，
}
const-DropdownSelector=（{title，options，keyName，id，onSelect}:Props）=>
{options.map（元素=>
{element.name}
,
)
}
DropdownSelector.defaultProps={
id:null，
}
DropdownSelector.propTypes={
选项：PropTypes.instanceOf（Object）.isRequired，
标题：PropTypes.string.isRequired，
onSelect:PropTypes.func.isRequired，
keyName:PropTypes.string.isRequired，
id:PropTypes.string，
}
导出默认下拉选择器

您还可以使用箭头函数来完成相同的任务，例如

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

但是，它也有您提到的潜在负面性能问题。React文档在这方面非常好，列举了您的选项及其优缺点：

• 更新到

  this.props.onSelect

  ，忘记了您将其作为一个道具传入，而不是在组件本身上定义它。如果您没有使用事件对象，那么可以使用

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

---

尝试Alex的答案，但只选择onSelect，没有“this”。

嗯，语法对我不起作用，（事件）已定义但从未使用过，this.onSelect也未定义。@Frenchy，更新了我的答案。。。忘记将您的

onSelect

处理程序作为道具传递，谢谢您的帮助！！我在更新状态时遇到了一些问题，但我还是设法解决了。此外，我还必须做：

onClick={（）=>onSelect（element）}

如果这回答了您的问题，请不要忘记接受。