Weitergabe von onClick-Funktionen: [ESLINT] JSX-Requisiten sollten nicht .bind() verwenden (react/jsx-no-bind)

Question

Ich schreibe gerade meine erste React-Anwendung und meine ESLINT sagt mir, dass ich nicht sein sollte mit .bind() auf JSX-Requisiten. Ich verstehe, dass dies daran liegt, dass bind neue Funktionen erstellt und sich daher negativ auf die Leistung auswirkt. Ich bin mir jedoch nicht sicher, wie ich dies umgestalten soll, um diesen Fehler zu beseitigen.

Wie kann ich das Element, das ich geklickt habe, an die Funktion übergeben, ohne eine Bindung zu verwenden?

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

könnten Sie auch einen Pfeil Funktion verwenden, die das Gleiche erreichen würde, so etwas wie

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

jedoch Es hat das gleiche potentielle negative Leistungsproblem, das Sie erwähnt haben. Die Reaktion docs in diesem Bereich sind sehr gut und aufzählen Ihre Möglichkeiten und die Vor-und Nachteile: https://facebook.github.io/react/docs/handling-events.html

• Aktualisiert this.props.onSelect, vergessen, dass Sie, dass in als Stütze im Gegensatz passierten sie auf die Komponente definieren selbst . Und wenn Sie nicht das Ereignisobjekt, verwenden Sie vielleicht nur

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

Answer 2

Antwort Alex versuchen, aber nur onSelect, ohne ‚this‘.