如何在React中将事件处理程序作为prop传递？

Question

I have two js files. 1.Talker.js 2.Button.js

Talker.js

    import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from './Button';

class Talker extends React.Component {
  talk() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }

  render() {
    return <Button talk={this.talk} />;
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

Button.js

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button>
        Click me!
      </button>
    );
  }
}

I wanted to pass the 'talk' method to 'Button' .But when i change the code

return <Button talk={this.talk} />;

in Talker class to

 return <Button talk={talk} />;

it also working fine.What is the use of 'this' key word here?Is it neccessary? What is the difference happen when i use the second piece of code?

Answer 1

Cause Button does never call talk . If you would accept it as a button property, eg:

 export class Button extends React.Component { 
   render() { 
      return <button onClick={this.props.talk} >Click me!</button>;
   }
 }

Then passing talk will fail, as talk is undefined and that cant be called. So no, it is not working fine. Using this to refer to the context is mandatory.

Answer 2

You're not using the this.props.talk in the Button component, so it doesn't do anything when clicked, and you also don't get an error.

You need to do two things:

1.) Add an onClick handler in your Button component.

<button onClick={this.props.talk}>click me</button>

2.) In your Talker component, make sure you're using this when you pass the prop. If you try and do talk={talk} you'll get an error when you click the button, as talk is undefined . What you're looking for is: talk={this.talk} to refer to the function talk() you defined in the Talker component.

Working example here .

Answer 3

Are you sure <Button talk={talk} />; works? Because talk is undefined there so I'm a bit confused. It shouldn't work.