javascript - organizar - Creando función personalizada en el componente React

react js

Question

Tengo un componente React

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

componentDidMount métodos componentDidMount y onClick usan parcialmente el mismo código, excepto por un ligero cambio en los parámetros.

¿Es posible crear una función dentro de la clase de componente para que pueda reutilizarse en el alcance del componente?

Answer 1

De otra manera:

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

En este formato no necesitas usar bind

Answer 2

Puede crear funciones en componentes de reacción. En realidad, es una clase regular de ES6 que se hereda de React.Component . Solo tenga cuidado y conéctelo al contexto correcto en el evento 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" />;
    }
}

Answer 3

Puedes probar esto.

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

La única preocupación es que hay que vincular el contexto a la función.