React+ts实现二级联动效果.docx
第
React+ts实现二级联动效果
本文实例为大家分享了React+ts实现二级联动效果的具体代码，供大家参考，具体内容如下
.tsx文件
import{Component,createRef}fromreact
import./index.less
interfaceState{
top:any
ButtonList:Button[]
ContentList:Content[]
ButtonIndex:number
interfaceButton{
id:string
text:string
interfaceContent{
id:string
text:string
height:number
top:number
interfaceProps{
classStairsextendsComponentProps,State{
LeftList:Button[]
RightList:Content[]
kaiguan:boolean
right=createRefHTMLDivElement()
left=createRefHTMLDivElement()
LeftTex=createRefHTMLDivElement()
//oTop:number|undefined
viewHeight:number|undefined
offHeight:number|undefined
Lefttext=createRefHTMLDivElement()
top:number|undefined
oTop:number|undefined
constructor(props:Props){
super(props)
this.state={
ButtonList:[],
ContentList:[],
ButtonIndex:0,
top:0
this.LeftList=[]
this.RightList=[]
this.kaiguan=true
this.oTop=0
componentDidMount(){
this.BtnList(20)
this.ConList(20)
this.setState({
ButtonList:this.LeftList,
ContentList:this.RightList
getRandom(m:number,n:number):number{
returnparseInt(`${Math.random()*(m-n)+n}`);
BtnList(n:number){
for(leti=0;ii++){
this.LeftList.push({
id:`a${i}`,
text:`按钮${i}`,
ConList(n:number){
letConTop=0;
for(leti=0;ii++){
letRandomHeight=this.getRandom(736,1400);
this.RightList.push({
id:`b${i}`,
text:`标题${i}`,
height:RandomHeight,
top:ConTop,
ConTop+=RandomHeight;
FnScroll(){
//console.log(11)
if(this.right.current){
this.oTop=this.right.current.scrollTop;
if(this.kaiguan){
//console.log(111)
letcount=0
for(vari=0;ithis.state.ContentList.length;i++){
if(this.oTop=this.state.ContentList[i].top){
count=i
this.setState({
ButtonIndex:count
//console.log(Bu