React 구성 요소에서 사용자 지정 함수 생성

React 구성 요소에서 사용자 지정 함수 생성

React 컴포넌트가 있다.

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

componentDidMount그리고.onClick메서드는 파라미터가 약간 변경된 것을 제외하고 부분적으로 동일한 코드를 사용합니다.

컴포넌트 클래스 내에서 기능을 생성하여 컴포넌트의 범위에서 재사용할 수 있습니까?

반응 성분에서 함수를 생성할 수 있습니다.이 클래스는 실제로 다음에서 상속되는 일반 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" />;
    }
}

다른 방법:

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

이거 드셔보세요.

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

유일한 관심사는 콘텍스트를 함수에 바인딩해야 한다는 것입니다.

리액트 기능 탑재

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import Button from "@material-ui/core/Button";

const App = () => {
  const saySomething = (something) => {
    console.log(something);
  };
  useEffect(() => {
    saySomething("from useEffect");
  });
  const handleClick = (e) => {
    saySomething("element clicked");
  };
  return (
    <Button variant="contained" color="primary" onClick={handleClick}>
      Hello World
    </Button>
  );
};

ReactDOM.render(<App />, document.querySelector("#app"));

https://codesandbox.io/s/currying-meadow-gm9g0

언급URL : https://stackoverflow.com/questions/34875557/creating-custom-function-in-react-component