[英]Creating custom function in React component
我有一個 React 組件
export default class Archive extends React.Component {
...
}
componentDidMount
和onClick
方法部分使用相同的代碼,只是參數略有變化。
是否可以在組件類中創建一個函數,以便它可以在組件范圍內重用?
您可以在 React 組件中創建函數。 它實際上是繼承自React.Component
的常規ES6 類。 請小心並將其綁定到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;
唯一關心的是你必須將上下文綁定到函數
使用 React Functional 方式
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"));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.