Изменение функции onClick для компонента js?

Question

У меня есть компонент с кнопкой и 2 functions.Button компонент, используемый в различных компонентах. И для некоторых нужна одна функция для события onclick, для другой - вторая. Как изменить функции для события onclick? Я использую this answer, но всегда получаю неопределенность в моих компонентах.

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> 

    ); 
} 

И в другом компоненте:

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

Также попытался добавить

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

застегивать componentm но всегда получаю ошибку

_this2.secondFunction is not a function 

Answer 1

Поскольку вы передаете secondFunction() как поддерживать MyButtonComponent компонент и, следовательно, она не должна быть определена в MyButtonComponent компонента, но в компоненте, в котором у вас есть код, приведенный ниже

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

В MyButtonComponent вы можете ссылаться на него, как this.props.onClick(), но он должен быть определен в компоненте вызова

Кроме того, необходимо связать функцию при прохождении его в качестве опоры для MyButtonComponent как

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

Проверьте ответ here понимать поток лучше

Answer 2

Проблема выглядит с тем, как вы используете this - при вызове this.secondFunction в <FormGroup> элемент вашего другого компонента, он ищет secondFunctionв этом компонента. Вы определили secondFunction в MyButtonComponent, так что он возвращается как undefined.

Вы можете обойти это, указав обработчик одного щелчка в MyButtonComponent, который выбирает, какую функцию вызывать на основе опоры, которую вы можете обновлять извне. Например.

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

Тогда вы можете изменить это свойство в методе визуализации вашего другого компонента, например.

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