Change onClick function for component react js?

Question

I have component with button and 2 functions.Button component used in various components. And for some need one function for onclick event, for other - second. How can I change functions for onclick event? I'm using this answer, but always getting undefined in my components.

export default class MyButtonComponent extends Component {

constructor(props) {
    super(props);
    propTypes: {
        onClick: PropTypes.func
    };
    this.state = { loading: false, api_url: "http://localhost:8000" };
}

 static get DefaultProps() {
  return {
    onClick: this.firstFunction(event)
  }
}

firstFunction(){
/*some code*/
}

secondFunction(){
/*some code*/
}

render() {
    return (
        <LaddaButton
            loading={this.state.loading}
            onClick={this.props.onClick}
            className='submit'
            data-color="#eee"
            data-style={SLIDE_UP}
            data-spinner-size={30}
            data-spinner-color="#ddd"
            data-spinner-lines={12}
            data-url={this.props.url}
        >
            Отправить
        </LaddaButton>

    );
}

And in another component:

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction} data-url="someurl.com"></MyButtonComponent>
     </Col>
</FormGroup>

Also tried add

onClick={e => this.secondFunction(e)}

to button componentm but always getting error

_this2.secondFunction is not a function

is `secondFunction` defined in the parent component where the `` is defined ? — Olivier Boissé, Feb 07 '17 at 13:35
no, form group from another component, secondfunction defined in button component. — Simple runner, Feb 07 '17 at 13:37
`secondFunction` should not be defined in MyButtonComponent, it should be defined in the parent component — Olivier Boissé, Feb 07 '17 at 13:39
do you want to pass to button some kind of flag which specify what effect method from button should be fired or you want to pass method to be fired from parent? — Kasia, Feb 07 '17 at 13:46

score 3 · Answer 1 · answered Feb 07 '17 at 13:45

The problem looks to be with how you're using this - when you call this.secondFunction in the <FormGroup> element of your other component, it's looking for secondFunction in that component. You've defined secondFunction in MyButtonComponent, so it's coming back as undefined.

You could get around this by defining a single click handler in MyButtonComponent that chooses which function to call based on a prop that you can update externally. E.g.

function myClickHandler(e) {
    if(useFirst) {
        this.firstFunction(e);
    } else {
        this.secondFunction(e);
    }
}

Then you could change that property in the render method of your other component, e.g.

<FormGroup>
    <Col mdOffset={5} md={7}>
        <MyButtonComponent useFirst=false data-url="someurl.com"></MyButtonComponent>
    </Col>
</FormGroup>

score 2 · Accepted Answer · edited May 23 '17 at 11:53

Since you are passing secondFunction() as a prop to the MyButtonComponent component and hence it must not be defined in the MyButtonComponent component but in the component in which you have the below code

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction} data-url="someurl.com"></MyButtonComponent>
     </Col>
</FormGroup>

In the MyButtonComponent you can reference it as this.props.onClick() but it must be defined in the calling component

Also you need to bind the function while passing it as a prop to the MyButtonComponent like

<FormGroup>
     <Col mdOffset={5} md={7}>
         <MyButtonComponent onClick={this.secondFunction.bind(this)} data-url="someurl.com"></MyButtonComponent>
     </Col>
</FormGroup>

Check the answer here to understand the flow better

This is a much more elegant solution than mine - passing functions as properties of components is very flexible. — Graham Harper, Feb 07 '17 at 14:31

Change onClick function for component react js?

2 Answers2