React Passing Functions to Components How do I pass a parameter to an event handler or callback? Example: Passing params using data-attributes

Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks.

const A = 65 // ASCII character code

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>
    )
  }
}

const A = 65 // ASCII character code

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>
    )
  }
}

React Passing Functions to Components How do I pass a parameter to an event handler or callback?

This is equivalent to calling .bind:

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

React Passing Functions to Components How do I pass a parameter to an event handler or callback?

You can use an arrow function to wrap around an event handler and pass parameters:

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

React Passing Functions to Components How do I bind a function to a component instance? Bind in Constructor (ES2015)

There are several ways to make sure functions have access to component attributes like this.props and this.state, depending on which syntax and build steps you are using.

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

React Passing Functions to Components How do I bind a function to a component instance? Arrow Function in Render

Using Function.prototype.bind in render creates a new function each time the component renders, which may have performance implications (see below).

class Foo extends Component {
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

React Passing Functions to Components How can I prevent a function from being called too quickly or too many times in a row? Debounce

Debouncing ensures that a function will not be executed until after a certain amount of time has passed since it was last called. This can be useful when you have to perform some expensive calculation in response to an event that might dispatch rapidly (eg scroll or keyboard events). The example below debounces text input with a 250ms delay.

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="Search..."
        defaultValue={this.props.value}
      />
    );
  }

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

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

React Passing Functions to Components How can I prevent a function from being called too quickly or too many times in a row? requestAnimationFrame throttling

Using this technique will only capture the last published value in a frame. You can see an example of how this optimization works on MDN

import rafSchedule from 'raf-schd';

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

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

    // Create a new function to schedule updates.
    this.scheduleUpdate = rafSchedule(
      point => this.props.onScroll(point)
    );
  }

  handleScroll(e) {
    // When we receive a scroll event, schedule an update.
    // If we receive many updates within a frame, we'll only publish the latest value.
    this.scheduleUpdate({ x: e.clientX, y: e.clientY });
  }

  componentWillUnmount() {
    // Cancel any pending updates since we're unmounting.
    this.scheduleUpdate.cancel();
  }

  render() {
    return (
      <div
        style={{ overflow: 'scroll' }}
        onScroll={this.handleScroll}
      >
        <img src="/my-huge-image.jpg" />
      </div>
    );
  }
}

React Passing Functions to Components How can I prevent a function from being called too quickly or too many times in a row? Throttle

Throttling prevents a function from being called more than once in a given window of time. The example below throttles a “click” handler to prevent calling it more than once per second.

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}>Load More</button>;
  }

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

React Passing Functions to Components How do I pass an event handler (like onClick) to a component?

Pass event handlers and other functions as props to child components:

<button onClick={this.handleClick}>

do I really need to have an event handler for URLLoader?

Here is a code example of how you would want to handle this based off of the code you supplied:

package
{
    import flash.events.Event;
    import flash.events.IOErrorEvent;
    import flash.events.SecurityErrorEvent;
    import flash.net.URLLoader;
    import flash.net.URLRequest;

    public class stackQuery
    {
        private var loader: URLLoader = new URLLoader(); //let's move it out to the class level so you can easily reference it from other methods (though this is purely optional)

        public function stackQuery()
        {
        }

        public function makeQuery(): String {
            var request:URLRequest = URLRequest("http://www.google.com");


            //add you listeners before loading
            loader.addEventListener(Event.COMPLETE, handleResponse);
            loader.addEventListener(IOErrorEvent.IO_ERROR, handleResponse); //it's good practice to also listen for errors
            loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, handleResponse); //this kind of error will happen if you're trying to load a local resource but have published as network only (or vice-versa)

            //load the request, any code after this will run before the load completes. 
            loader.load(request);
        }

            //this function will run once the load completes
        private function handleResponse(event:Event):void
        {
            if (event is IOErrorEvent) {
                //you had an IO error, better do something 
                return;
            }

            if (event is SecurityErrorEvent) {
                //url wasn't allowed to load
                return;
            }

            trace(loader.data); //this is what was returned from the page
                //you could also get it by referencing the currentTarget of the event
                trace(URLLoader(event.currentTarget).data);
        }
    }
}

Recommend

React Passing Functions to Components How do I pass a parameter to an event handler or callback?

React Passing Functions to Components Why is my function being called every time the component renders?

React Passing Functions to Components Why is binding necessary at all?

React Passing Functions to Components How do I bind a function to a component instance? Arrow Function in Render

React Passing Functions to Components How do I bind a function to a component instance? Class Properties (Stage 3 Proposal)

React Passing Functions to Components How do I bind a function to a component instance? Bind in Constructor (ES2015)

React Passing Functions to Components How do I pass an event handler (like onClick) to a component?

React Building Your Own Hooks useYourImagination()

React Building Your Own Hooks Using a Custom Hook Tip: Pass Information Between Hooks

React Building Your Own Hooks Using a Custom Hook

React Building Your Own Hooks Extracting a Custom Hook