react遍历生成多个Button的单选和多选

// 设置初始默认值

this.state：{

    btnClassName：' ',

    btnClassNameArry: [ ],

}

// 选中button，多选

handleSelect = (itemChild) => {

const { btnClassNameArry } = this.state;

// 如果点击的在数组中已经存在，则从数组删除，否则，添加到数组

if (btnClassNameArry.indexOf(itemChild) > -1) {

      btnClassNameArry.splice(btnClassNameArry.indexOf(itemChild), 1);

} else {

     btnClassNameArry.push(itemChild);

}

const newBtnClassNameArry = btnClassNameArry;

// 改变state状态值

this.setState({

       btnClassNameArry: newBtnClassNameArry,

});

}

// 选中button 单选

handleSelectSigle = (itemChild) => {

// 改变state状态值

this.setState({

       btnClassName: itemChild,

});

}

 

//渲染列表

<div className="condition-div">

{data.map((item) => (

      <Row key={item.level0}>

     <Col span={5} className="condition-firCol">

         {item.level0}

      </Col>

 

      <Col span={19} className="tableSearchCol">

         {item.level1.map((itemChild) => (

           <Button

            key={itemChild}

           // 单行操作

           // className={this.state.btnClassName === itemChild ? 'tableSearch-btn-change' : 'tableSearch-btn'}

          //多行操作

          className={this.state.btnClassNameArry.indexOf(itemChild) > -1 ? 'tableSearch-btn-change' : 'tableSearch-btn'}

          onClick={() => {

              this.handleSelect(itemChild);

          }}

     >

         {itemChild}

      </Button>

     ))

     }

   </Col>

</Row>

))

}

</div>