Создание пользовательской функции в компоненте React

У меня есть компонент React

export default class Archive extends React.Component { 
   ...
}

Методы componentDidMount и onClick частично используют один и тот же код, за исключением небольшого изменения параметров.

Возможно ли создать функцию внутри класса компонента, чтобы ее можно было повторно использовать в области компонента?

Ответ 1

Вы можете создавать функции в компонентах реакции. Это фактически обычный класс ES6, который наследуется от React.Component. Просто будьте осторожны и привяжите его к правильному контексту в событии onClick:

export default class Archive extends React.Component { 

    saySomething(something) {
        console.log(something);
    }

    handleClick(e) {
        this.saySomething("element clicked");
    }

    componentDidMount() {
        this.saySomething("component did mount");
    }

    render() {
        return <button onClick={this.handleClick.bind(this)} value="Click me" />;
    }
}

Ответ 2

Вы можете попробовать это.

// Author: Hannad Rehman Sat Jun 03 2017 12:59:09 GMT+0530 (India Standard Time)

import React from 'react';
import RippleButton from '../../Components/RippleButton/rippleButton.jsx';

class HtmlComponents extends React.Component {

    constructor(props){
        super(props);
        this.rippleClickFunction=this.rippleClickFunction.bind(this);
    }

    rippleClickFunction(){
        //do stuff. 
        // foo==bar
    }

    render() {
      return (
         <article>
             <h1>React Components</h1>
             <RippleButton onClick={this.rippleClickFunction}/>
         </article>
      );
   }
}

export default HtmlComponents;

Меня беспокоит только то, что вы должны привязать контекст к функции

Ответ 3

Другой путь:

export default class Archive extends React.Component { 

  saySomething = (something) => {
    console.log(something);
  }

  handleClick = (e) => {
    this.saySomething("element clicked");
  }

  componentDidMount() {
    this.saySomething("component did mount");
  }

  render() {
    return <button onClick={this.handleClick} value="Click me" />;
  }
}

В этом формате вам не нужно использовать bind