在React组件中创建自定义函数

Question

我有一个React组件

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

componentDidMount和onClick方法部分使用相同的代码,除了参数的微小变化.

是否可以在组件类中创建一个函数,以便可以在组件的范围内重用它？

Answer 1

您可以在react组件中创建函数.它实际上是继承自的常规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" />;
    }
}

Answer 2

其他方式:

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

Answer 3

你可以试试这个.

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

你唯一关心的是你必须将上下文绑定到函数