![](/img/trans.png)
[英]Passing user input from child functional component to parent functional component
[英]converting from classes to Functional component with composition parent-child
我正在尝试将带有 inheritance 的 React 类转换为功能组件,并且不会错过任何功能。 到目前为止,我阅读了大量文章,但无法弄清楚如何做到这一点。 主要问题是我的父组件修改了子组件的 state。
# Base class
class BaseTable extends React.Component {
// function to filter table when search text is changed
_onChangeText = (ev, text) => {
// storing filterText as a state, so onDropdownChange() can refresh filter
this.setState({ filterText: text });
if (this.state.items[0] && this.state.items[0].hasOwnProperty(this.state.filterBy)) {
// refreshing the filteredItems array with new query
this.setState({
filteredItems: text ? this.state.items.filter(item => item[this.state.filterBy].toLowerCase().indexOf(text.toLowerCase()) > -1) : this.state.items,
selectedPageIndex: 0
});
}
};
}
export default BaseTable;
子 class 扩展它并通过使用this
引用使用父 class 的方法:
class SpecificTable extends BaseTable {
constructor(props) {
super(props);
}
this.state = {
items: [],
filteredItems: [],
filterText: "",
selectedPageIndex: 0,
isError: false,
errMsg: ''
};
return (
<TextField
label="Search Query:"
onChange={this._onChangeText}
styles={controlStyles}
value={this.state.filterText}
/>
);
}
export default SpecificTable;
目标是将其转换为没有类的功能组件并重用 BaseTable 中的这些函数,因为我有一些“特定表”。 我正在考虑创建 ReactContext 但仍然遇到问题。
编辑:添加链接到我关于inheritance 组成的评论
在功能组件中,您可以通过创建一个可重用的钩子来实现,该钩子可由以前扩展 BaseTable 的各种表组件使用
const useBaseTable = () => {
const [state,setState] = useState(your_base_state);
const onChangeText = useCallback((arg) => {
... your onChangeText
},[...relevant dependencies]);
// return your state, setState (if necessary), and your callback
// in reality, you can return whatever you want from this hook
return [state, setState, onChangeText];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.