change Tabs to use react hooks
This commit is contained in:
parent
45e6d15fb3
commit
c2bf474136
|
@ -1,22 +1,7 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
class Tab extends Component {
|
||||
onClick = () => {
|
||||
const { label, onClick } = this.props;
|
||||
onClick(label);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
onClick,
|
||||
props: {
|
||||
activeTab,
|
||||
label,
|
||||
},
|
||||
} = this;
|
||||
import React from 'react';
|
||||
|
||||
const Tab = ({ onClick, activeTab, label }) => {
|
||||
let className = 'tab-list-item';
|
||||
|
||||
if (activeTab === label) {
|
||||
className += ' tab-list-active';
|
||||
}
|
||||
|
@ -25,12 +10,11 @@ class Tab extends Component {
|
|||
<li
|
||||
role="presentation"
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
onClick={() => onClick(label)}
|
||||
>
|
||||
{label}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default Tab;
|
||||
|
|
|
@ -1,31 +1,9 @@
|
|||
import React, { Component } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import Tab from './Tab';
|
||||
|
||||
class Tabs extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { children } = this.props;
|
||||
this.state = {
|
||||
activeTab: children[0].props.label,
|
||||
};
|
||||
}
|
||||
|
||||
onClickTabItem = (tab) => {
|
||||
this.setState({ activeTab: tab });
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
onClickTabItem,
|
||||
props: {
|
||||
children,
|
||||
},
|
||||
state: {
|
||||
activeTab,
|
||||
},
|
||||
} = this;
|
||||
const Tabs = ({ children }) => {
|
||||
const [activeTab, setActiveTab] = useState(children[0].props.label);
|
||||
|
||||
return (
|
||||
<div className="tabs">
|
||||
|
@ -41,7 +19,7 @@ class Tabs extends Component {
|
|||
activeTab={activeTab}
|
||||
key={label}
|
||||
label={label}
|
||||
onClick={onClickTabItem}
|
||||
onClick={(tab) => setActiveTab(tab)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
@ -56,7 +34,6 @@ class Tabs extends Component {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default Tabs;
|
||||
|
|
Loading…
Reference in New Issue
Block a user