傳遞onClick函數：[ESLINT] JSX道具不應該使用.bind（）（react/jsx-no-bind）

Question

我目前正在寫我的第一個反應應用程序，我的ESLINT告訴我，我不應該在JSX道具上使用.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 

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 

Answer 1

你也可以使用一個箭頭功能，這將完成同樣的事情，所以像

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

然而它具有與您提到的相同的潛在負面性能問題。該陣營文檔是在這方面非常好，並且列舉你的選擇和他們的親的和利弊：https://facebook.github.io/react/docs/handling-events.html

• 更新到this.props.onSelect，忘了你是在傳遞，作爲一個道具，而不是定義它的組件本身。如果你不使用事件對象，或許只是用

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

Answer 2

嘗試Alex的答案，只是ONSELECT，無「本」。