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

알렉스의 답변을 시도 사용하지만, 단지 onSelect를없이 '이'.