Reactjs 如何在React中突出显示所选按钮？

以下react组件有四个按钮，使用从父组件发送的道具中提取的数据创建。您可以在此处找到整个项目->

可通过->

单击任何按钮时，它会将单击的按钮的id返回给父组件。我的问题是，如何突出显示单击的按钮

import React, { Component } from 'react';


class ResumeTypes extends Component {

  constructor(props) {
    super(props);
    //this.handleChange = this.handleChange.bind(this);
  }   

  render() {


  return this.props.resumetypes.map((resumetype, selectedtype) => (
       <input type="button" style={{width: '25%', border: "none"}} id={resumetype.id} key={resumetype.id} value={ resumetype.type} onClick={this.props.selectedtype.bind(this, resumetype.id)}/>        

    ));

  }
}

import React，{Component}来自'React'；
类类型扩展组件{
建造师（道具）{
超级（道具）；
//this.handleChange=this.handleChange.bind（this）；
}   
render（）{
返回此.props.resumetypes.map（（resumetype，selectedtype）=>(
));
}
}

您应该将当前选择的按钮存储在您的状态中。 每次单击其中一个按钮时，使用按钮ID刷新状态值

然后根据是否与状态中的选定值对应，调整渲染函数中按钮的类：

类ResumeTypes扩展React.Component{
建造师（道具）{
超级（道具）；
//this.handleChange=this.handleChange.bind（this）；
此.state={
selectedButton:空
}
}
buttonSelected=selectedButton=>ev=>{
this.setState（{selectedButton}）
}
render（）{
返回(
{['A'，'B'，'C'].map（键=>
{key}
)}
)
}
}
render（，document.getElementById（“根”））
。已选定{
边框：2倍实心rgb（0,0,255）；
}
通过高亮显示，我假设您希望更改按钮的背景色
因此，单击一次，将活动选项卡的ID设置为状态，并在className中有条件地添加活动类

import React, { Component } from 'react';


class ResumeTypes extends Component {

  constructor(props) {
    super(props);
    this.state= {activeButton:''}
    //this.handleChange = this.handleChange.bind(this);
  }

  handleActiveButton(id) =>{
  this.props.selectedtype.bind(this, id)
  this.setState({activeButton: id})
  }

  render() {
   return this.props.resumetypes.map((resumetype, selectedtype) => (
       <input type="button" 
          className={`base-class ${this.state.activeButton == resumetype.id? 'active-color:'''}` } 
          style={{width: '25%', border: "none"}} 
          id={resumetype.id} 
          key={resumetype.id} 
          value={ resumetype.type} 
          onClick={(resumetype.id)=>handleActiveButton(resumetype.id)}
        />        
   ));
  }
}

谢谢！您建议的代码有效，只添加了一点（）

import React，{Component}来自'React'；
类类型扩展组件{
建造师（道具）{
超级（道具）；
this.state={ClickedButton:''}；
this.handleChange=this.handleChange.bind（this）；
} 
手柄更换（id）{
this.setState（{ClickedButton:id}）
this.props.selectedtype.bind（this，id）（）
}
render（）{
返回此.props.resumetypes.map（（resumetype，selectedtype）=>(
this.handleChange（resumetype.id）}/>
//onClick={this.props.selectedtype.bind（this，resumetype.id）}/>
));
}
}
导出默认简历类型；
保留一个新状态，如“selectedButton”，然后使用单击按钮的id设置此状态。现在，查看按钮的“id”是否等于“selectedButton”状态。如果是，用条件类突出显示它。谢谢你的回答，它只做了一个小改动。this.props.selectedtype.bind（this，id）（）
.base-class{
     //your default button styling
}
.active-color{
      //your active button styling
}

import React, { Component } from 'react';


class ResumeTypes extends Component {

  constructor(props) {
    super(props);
    this.state = {ClickedButton: ''};
    this.handleChange = this.handleChange.bind(this);
  } 

  handleChange(id) {

    this.setState({ClickedButton: id})
    this.props.selectedtype.bind(this, id)()

  }

  render() {


  return this.props.resumetypes.map((resumetype, selectedtype) => (
       <input type="button" 
       className={resumetype.id === this.state.ClickedButton ? "App-Button-Active" : "App-Button-Default"}
       style={{width: '25%', border: "none"}} 
       id={resumetype.id} 
       key={resumetype.id} 
       value={ resumetype.type} 
       onClick={ () => this.handleChange(resumetype.id)}/>
       //onClick={this.props.selectedtype.bind(this, resumetype.id)}/>      

    ));

  }
}

export default ResumeTypes;