外部化各种反应组件中的常见功能

时间:2017-08-14 13:05:05

标签: javascript reactjs

在不同的components中,我在样式或其他方面使用相同的功能。其中一些函数使用this.setState({...});我希望在一个公共位置收集所有这些函数,因此在重写它们时,我不必在所有组件中重写它们,而只需在一个文件上重写它们。但是,我不知道如何在不丢失其上下文的情况下在函数中编写this.setState({...});。有办法吗?

1 个答案:

答案 0 :(得分:2)

我假设您的意思是导出一个函数并在各种组件中调用此函数,同时保持this的范围

MyExportedFunctions.js:

export function handleChange(value, {target: {name, type}}) {
    this.setState({[name]: value}, () => console.log(this.state));
}

MyComponent.js:

  import {handleChange} from "./MyExportedFunctions";

        class MyComponent extends Component {
            constructor(props) {
                super(props);
                this.handleChange = handleChange.bind(this);

                this.state = {

                };
            }
            ...
     }

你的意思是这样吗?