如何在Reactjs的动态添加按钮中设置CSS

下面是我的简单调查表的React类组件：-

  import React, { Component } from "react";
  import "./SurveyFrom.css";

export class SurveyForm extends Component {
constructor(props) {
  super(props);
  this.state = {
    isSelected: false,
    selectedVal: 0,
  };
}

onHandleOnClick(data, e) {
  console.log(data);
  this.setState((prevState) => ({
    isSelected: !prevState.isSelected,
  }));

  this.setState((prevState) => ({
    selectedVal: (prevState.selectedVal = data),
  }));
}

renderRating() {
  var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  return arr.map((val) => {
    return (
      <button
        className="q-range-item-button"
        onClick={(e) => this.onHandleOnClick(val, e)}
      >
        {val}
      </button>
    );
  });
}

render() {
  return (
    <div>
      <form className="form">
        <label class="q-field-label" for="nps" title="Field is required">
          <div>
            {this.props.title}
            <span class="q-field-label-required">*</span>
          </div>
          <div></div>
        </label>
        <div>{this.renderRating()}</div>
        <div className="q-range-labels-text">
          <dive className="q-range-labels-text-max">
            Very likely&nbsp;&nbsp;&nbsp;&nbsp;
          </dive>
          <dive className="q-range-labels-text-min">Very unlikely</dive>
        </div>
        <div className="survey-form-submit">
          <button className="survey-form-submit-button" type="submit">
            Next
          </button>
        </div>
      </form>
    </div>
  );
}
}

export default SurveyForm;

import React，{Component}来自“React”；
导入“/SurveyFrom.css”；
导出类SurveyForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选：错，
selectedVal:0，
};
}
点击（数据，e）{
控制台日志（数据）；
this.setState（（prevState）=>({
isSelected:！prevState.isSelected，
}));
this.setState（（prevState）=>({
selectedVal：（prevState.selectedVal=数据），
}));
}
渲染（）{
var-arr=[0,1,2,3,4,5,6,7,8,9,10]；
返回arr.map（（val）=>{
返回(
this.onhandleon单击（val，e）}
>
{val}
);
});
}
render（）{
返回(
{this.props.title}
*
{this.renderRating（）}
很可能
不太可能
下一个
);
}
}
导出默认调查表；

我想在单击按钮0到10时应用一些css样式。

---

因为我添加了0到10个按钮并添加了一个循环，所以我不知道如何应用css样式使所选按钮变为绿色。您能建议我如何实现这一点吗？

我们的想法是将按钮的值保持在该状态。如果按钮的值或id与状态中保留的值相同，则在组件中有条件地应用该类。该类将根据指定的规则设置按钮的样式

---

将使用按钮上的

onClick

处理程序修改组件的状态。我也对您的代码进行了一些重构，并添加了一些解释性注释。我希望这对您有用：

import React，{Component}来自“React”；
导入“/SurveyFrom.css”；
//这可以在类之外声明，因为它永远不会更改
//将名称更改为“ratings”，这比“arr”更具表现力`
常数评级=[0,1,2,3,4,5,6,7,8,9,10]；
导出类SurveyForm扩展组件{
建造师（道具）{
//super（props）；-->这是不推荐使用的。除非您使用的是旧版本的React，否则您可能不需要它。
//如果愿意，您甚至可以完全去掉构造函数
此.state={
selectedRatingIndex:-1//您只需要一个值来保持所选状态。默认值为-1表示未选择任何值。
};
}
渲染=（）=>
//arrow函数确保正确绑定到`this`SurveyForm实例
ratings.map（（val，索引）=>(
您只需比较渲染周期中的数字：

    return (
      <button
        className=`q-range-item-button {$this.state.selectedVal === val ? 'rangebuttonenabled': ''}`
        onClick={(e) => this.onHandleOnClick(val, e)}
      >
        {val}
      </button>
    );

返回(
this.onhandleon单击（val，e）}
>
{val}
);

您只需将单击时存储的数字与添加CSS类时尝试渲染的数字进行比较即可

您确实需要一个CSS类：
.rangebuttonenabled{background color:'hotpink'}
，或者根据需要应用此逻辑。
Hello:）这里有类似的主题。请看一看，因为如果我可以阻止在评级选择后不再渲染它满足我的要求，您可以在那里找到有用的提示。我尝试了以下方法：-`shouldComponentUpdate（nextProps，nextState）{if（nextState.isSelected）{return false；}else{return true；}`它不起作用是的，我在代码中修复了它。但行为仍然如视频剪辑中所示。如何防止渲染以修复应用的css。我调试并
console.log（“selectedRatingIndex:+this.state.selectedRatingIndex）；
输出为SelectedStatingIndex:-1。因此，在将val设置为SelectedStatingIndex后，SetState没有为SelectedStatingIndex设置新的状态。SelectedStatingIndex已更新值。因为调用了它，而css的设置没有帮助。是的，这解决了问题。它正在工作。非常感谢。