onClick機能を継承する：[ESLINT] JSXの小道具は.bind（）（react/jsx-no-bind）を使用すべきではありません

Question

私は現在最初の反応アプリケーションを書いています。 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

あなたも同じことを達成するだろう矢印機能を使用することができ、とても

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

のようなものがしかし

// @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

あなたが言及したのと同じ潜在的な負のパフォーマンスの問題があります。コンポーネント自体でそれを定義するとは対照的に、あなたが小道具としてそれをで集めていることを忘れて、this.props.onSelectに更新https://facebook.github.io/react/docs/handling-events.html

• ：ザ・はドキュメントはこの分野で非常に優れているとあなたのオプションとプロのと短所を列挙リアクト。あなたは、イベントオブジェクトを使用していない場合は、おそらくちょうど

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

Answer 2

を使用して「この」なしで、ちょうどにonSelectアレックスの答えを試してみてください、しかし。