一：业务功能实现：思绪总结——按钮的默认选中

• 业务需求：默认选择第一个
  
• 实现思路：

1. state: btnclass=“active”
2. 默认选中按钮：className=‘this.state.btnclass’ onClick={()=>{this.setState({btnclass ：" "})}
   3.在css样式里面修改active的样式

.active {
  border-color: #29b7b7;
}

4.右上的图标，antd的Badge，offset设置偏移的位置[右，下]

代码：

  // 默认选中
  defaultChoose(item: any) {
    const { defaultBtn, curdescription } = this.state

    if (item.description === '短信触达') {
      return (
        <List.Item onClick={(e) => this.chooseWay(e)}>
          <Badge
            offset={[0, 10]}
            showZero={false}
            count={
              curdescription === item.description ? (
                <CheckCircleFilled style={{ color: '#04cb94' }} />
              ) : (
                ''
              )
            }
          >
            <Button className={defaultBtn} style={{ width: 200, height: 60, marginTop: 10 }}>
              <List.Item.Meta avatar={<img src="" />} description={item.description} />
            </Button>
          </Badge>
        </List.Item>
      )
    } else {
      return (
        <List.Item onClick={(e) => this.chooseWay(e)}>
          <Badge
            offset={[0, 10]}
            showZero={false}
            count={
              curdescription === item.description ? (
                <CheckCircleFilled style={{ color: '#04cb94' }} />
              ) : (
                ''
              )
            }
          >
            <Button style={{ width: 200, height: 60, marginTop: 10 }}>
              <List.Item.Meta avatar={<img src="" />} description={item.description} />
            </Button>
          </Badge>
        </List.Item>
      )
    }
  }

• 使用框架，组件：
  react antd