Creazione funzione personalizzata in React componente

Question

Ho una componente React

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

componentDidMount e onClick metodi parzialmente usano lo stesso codice, eccetto per lieve modifica dei parametri.

È possibile creare una funzione all'interno della classe del componente in modo che possa essere riutilizzata nell'ambito del componente?

Answer 1

È possibile creare funzioni nei componenti di reazione. In realtà è regolare ES6 class che eredita da React.Component. Basta essere attenti e associarlo al contesto corretto in onClick evento:

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" />; 
    } 
} 

Answer 2

you can try this. 

    //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; 

l'unica preoccupazione è che devi associare il contesto alla funzione