העברת פונקציות לקומפוננטות

<button onClick={this.handleClick}>

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('הכפתור נלחץ');
  }
  render() {
    return <button onClick={this.handleClick}>לחץ עליי</button>;
  }
}

class Foo extends Component {
  // הערה: התחביר ניסיוני ואינו חלק מהתקן בינתיים
  handleClick = () => {
    console.log('הכפתור נלחץ');
  }
  render() {
    return <button onClick={this.handleClick}>לחץ עליי</button>;
  }
}

class Foo extends Component {
  handleClick() {
    console.log('הכפתור נלחץ');
  }
  render() {
    return <button onClick={this.handleClick.bind(this)}>לחץ עליי</button>;
  }
}

class Foo extends Component {
  handleClick() {
    console.log('הכפתור נלחץ');
  }
  render() {
    return <button onClick={() => this.handleClick()}>לחץ עליי</button>;
  }
}

obj.method();

var method = obj.method;
method();

render() {
  // טעות: קריאה לפונקציה במקום להעביר אותה כרפרנס!
  return <button onClick={this.handleClick()}>Click Me</button>
}

render() {
  // נכון: הפונקציה מועברת כרפרנס!
  return <button onClick={this.handleClick}>Click Me</button>
}

<button onClick={() => this.handleClick(id)} />

<button onClick={this.handleClick.bind(this, id)} />

const A = 65 // קוד תו ב-ASCII

class Alphabet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      justClicked: null,
      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
    };
  }
  handleClick(letter) {
    this.setState({ justClicked: letter });
  }
  render() {
    return (
      <div>
        Just clicked: {this.state.justClicked}
        <ul>
          {this.state.letters.map(letter =>
            <li key={letter} onClick={() => this.handleClick(letter)}>
              {letter}
            </li>
          )}
        </ul>
      </div>
    )
  }
}

const A = 65 // קוד תו ב-ASCII

class Alphabet extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      justClicked: null,
      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
    };
  }

  handleClick(e) {
    this.setState({
      justClicked: e.target.dataset.letter
    });
  }

  render() {
    return (
      <div>
        Just clicked: {this.state.justClicked}
        <ul>
          {this.state.letters.map(letter =>
            <li key={letter} data-letter={letter} onClick={this.handleClick}>
              {letter}
            </li>
          )}
        </ul>
      </div>
    )
  }
}

import throttle from 'lodash.throttle';

class LoadMoreButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleClickThrottled = throttle(this.handleClick, 1000);
  }

  componentWillUnmount() {
    this.handleClickThrottled.cancel();
  }

  render() {
    return <button onClick={this.handleClickThrottled}>טען עוד</button>;
  }

  handleClick() {
    this.props.loadMore();
  }
}

import debounce from 'lodash.debounce';

class Searchbox extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.emitChangeDebounced = debounce(this.emitChange, 250);
  }

  componentWillUnmount() {
    this.emitChangeDebounced.cancel();
  }

  render() {
    return (
      <input
        type="text"
        onChange={this.handleChange}
        placeholder="חיפוש..."
        defaultValue={this.props.value}
      />
    );
  }

  handleChange(e) {
    this.emitChangeDebounced(e.target.value);
  }

  emitChange(value) {
    this.props.onChange(value);
  }
}

import rafSchedule from 'raf-schd';

class ScrollListener extends React.Component {
  constructor(props) {
    super(props);

    this.handleScroll = this.handleScroll.bind(this);

    // צור פונקציה חדשה לקביעת עידכונים.
    this.scheduleUpdate = rafSchedule(
      point => this.props.onScroll(point)
    );
  }

  handleScroll(e) {
    // כאשר אנחנו מקבלים אירוע גלילה, קבע עידכון.
    // אם אנחנו מקבלים עידכונים רבים בפרק זמן קצוב, נפרסם רק את הערך העדכני ביותר.
    this.scheduleUpdate({ x: e.clientX, y: e.clientY });
  }

  componentWillUnmount() {
    // בטל את כל העידכונים הממתינים מפני שאנחנו לא מעוגנים (unmounted).
    this.scheduleUpdate.cancel();
  }

  render() {
    return (
      <div
        style={{ overflow: 'scroll' }}
        onScroll={this.handleScroll}
      >
        <img src="/התמונה-הענקית-שלי.jpg" />
      </div>
    );
  }
}