将prop值传递给另一个组件时如何避免箭头函数？

Question

**ApplicatorType Stateful Component**    

class ApplicatorType extends Component {

public state = {
applicatorTypes: ['Carpenter', 'Painter', 'Plumber'],
applicatorTypesSelected: [],
}

public render() {

allotedTypes = (
    <DisplayTypes
        applicatorTypes={this.state.applicatorTypes}
        changed={this.typeCheckedHandler}
        checkedType={this.state.applicatorTypesSelected}
    />
);

return <div> {allotedTypes} </div>
}

private typeCheckedHandler = 
(event: React.ChangeEvent, selected: string) => {

    const index = this.state.applicatorTypesSelected.indexOf(selected);
    if (index < 0) {
        this.state.applicatorTypesSelected.push(selected);
    } else {
        this.state.applicatorTypesSelected.splice(index, 1);
    }
    this.setState({
        applicatorTypesSelected:[...this.state.applicatorTypesSelected]
    });
};
}


**DisplayTypes Stateless Component**

import * as React from 'react';
import Checkbox from '../../UI/Checkbox/Checkbox';

const displayTypes: React.SFC<any> = 
({applicatorTypes, changed, checkedType}) => 

   applicatorTypes.map((element: string, index: number) => {
       return 
       (<Checkbox
        key={index}
        changed={(event: React.ChangeEvent) => changed(event, element)}
        checkedType={checkedType.some((x: string) => x === element)}
        element={element}
        />);
     })

 export default displayTypes;


 **Checkbox stateless component**


 const checkbox: React.SFC<any> = ({ element, changed, checkedType}) => 
 {
   return (
      <div>
        <input
            name={element}
            className="checkbox"
            type="checkbox"
            onChange={changed}
            checked={checkedType}
        />{' '}
        &nbsp;
        <label onClick={changed}>{element}</label>
    </div>
    );
   };

   export default checkbox;

In the above DisplayTypes Component, here,

 changed={(event: React.ChangeEvent) => changed(event, element)}
 checkedType={checkedType.some((x: string) => x === element)}

the recommended way is to avoid arrow functions. However, I could not make it work without arrow functions. Is there a better way to achieve the same functionality without arrow functions?

Right now, I am using "jsx-no-lambda": false in tslint.json and the code is working perfectly fine.

Answer 1

You can make the following changes to avoid lambda functions

private typeCheckedHandler = 
    (selected: string, event: React.ChangeEvent,) => {
        ...
        ...
    };

And change the component as:

const DisplayTypes =
  ({ applicatorTypes, changed, checkedType }) => {
      return applicatorTypes.map((element, index) => {
        let list = checkedType.some((x: string) => x === element);
        return (<Checkbox
          key={index}
          changed={changed.bind({}, element)}
          checkedType={list}
          element={element}
        />);
      })
}

Feel free to post comment in case of need.