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 <FormGroup> is defined ? — Olivier Boissé
– Olivier Boissé, Commented Feb 7, 2017 at 13:35
no, form group from another component, secondfunction defined in button component. — Simple runner
– Simple runner, Commented Feb 7, 2017 at 13:37
secondFunction should not be defined in MyButtonComponent, it should be defined in the parent component — Olivier Boissé
– Olivier Boissé, Commented Feb 7, 2017 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
– Kasia, Commented Feb 7, 2017 at 13:46

Graham Penrose · Accepted Answer · 2017-02-07 13:45:50Z

3

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>

answered Feb 7, 2017 at 13:45

Graham Penrose

4775 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:53:26Z

2

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

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 7, 2017 at 13:41

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

1 Comment

Graham Penrose Over a year ago

This is a much more elegant solution than mine - passing functions as properties of components is very flexible.

Collectives™ on Stack Overflow

Change onClick function for component react js?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related