React 多个button默认给第一个button设置样式，autoFocus属性_默认a-button-group中的第一个button

问题描述：从父组件传来的data在子组件进行多个button遍历，默认将第一个button的样式设置为button:focus的样式

代码：

import React from "react";
import '../../style/detailLift/HeaderDate.scss'

export default class HeaderDate extends React.Component {

  state={
    index:0//默认选中第一个
  }

  changeButton = (item,index) =>{
    this.setState({index})//更新状态
  }

  render() {
    const {selectType} = this.props
    return (
      <div className={"headerDate_box"}>
        {
          selectType.map((item,index)=>{
            return
             <button className={index===this.state.index?'button_active':''}
             key={index} onClick={()=>this.changeButton(item,index)}
             >
             {item.name}
             </button>
          })
        }
      </div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

HeaderDate.scss：

headerDate_box{
  margin-left:50%;
  transform: translateX(-50%);
}
.headerDate_box button{
  font-size:0.8em;
  color:#fff8;
  width:3.5em;
  height:1.5em;
  line-height: 1.5em;
  background-color: transparent;
  padding: 0 1em 0 1em;
  border-radius: 10em;
  border: 0.05em solid #fff8;
  margin-right:1em;
}
.headerDate_box button:focus,.headerDate_box .button_active{
  outline: none;
  border-color:#fff8;
  background-color: #41496D;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果图：

其实button中有个 autoFocus属性：只有当页面加载时按钮会自动地获得焦点(加载完当你点击页面其它位置时会自动失效)，在此代码中有4个button，它会自动聚焦最后一个button，并不能将第一个button聚焦。

return (
      <div className={"headerDate_box"}>
        {
          selectType.map((item:Item,index:number)=>{
            return 
            <button autoFocus={true} 
             key={index} 
             onClick={()=>this.changeButton(item,index)}>
             {item.name}
            </button>
          })
        }
      </div>
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果图：

采用css方式比较好~