抽象一个也执行状态更新的onClick函数

时间:2018-02-05 01:07:40

标签: javascript reactjs

我试图将我的onClick函数抽象为自己的文件,然后在组件的按钮中使用它。

但是,该函数需要有条件地更新正在使用的组件的状态。

import {ButtonClickHandlers} from '../ButtonClickHandlers';

<button onClick = {ButtonClickHandlers.refreshDatabase} />

在我的组件中,我想做这样的事情:

unordered_set<>

如何实现此功能?

1 个答案:

答案 0 :(得分:0)

这就是我如何做到的,可能有更好的方法。我已经导入了clickevent并将上下文作为paremeter传递

clickevenhandler.js

 const clickEvent = (context) => {
    context.setState({ click: true });
 }

 export default clickEvent;

我的测试组件

 import clickEvent from './clickhandler';

class TestComp extends React.Component<any, any>{
       constructor(props) {
       super(props);
       this.state = {
          click: false
         }
        }
   renderclicked() {
     if (this.state.click) {
         return (<div>clicked</div>);
       }
       else {
           return (<div></div>);
       }
    }
    render() {
       return (<div>Test
               <button onClick={() => clickEvent(this)}>click</button>
            {this.renderclicked()}
           </div>);
    }
}