Reactjs 如何根据在react中单击的按钮为按钮指定不同的值

我在react中创建了一个组件，其中用户应该在六个不同的按钮之间进行选择，然后当您选中按钮时，可以按下下一个按钮。我看过一些单选按钮的教程，但不包括普通按钮。 这是原型： 有任何帮助的提示或链接吗？

尝试过这个，但似乎对我不起作用。
Tried this, but it doesn't seems to work for me.

let ratingValue = [{ val: 1 }, { val: 2 }, { val: 3 }, { val: 4 }, { val: 5 }, { val: 6 }];

class Scale extends Component {
  constructor(props) {
    super(props);
    this.handleButtonClicked = this.handleButtonClicked.bind(this);
  }

  handleButtonClicked(buttonNumber, buttonValue) {
    console.log("User Pressed " + buttonNumber + "with Rating of " + buttonValue);
  }

  render() {
    let buttonsMap = ratingValue.map((button, index) => {
      return (
        <button key={index} onClick={this.handleButtonClicked(index, button.val)}>
          {button.val}
        </button>
      );
    });
    return <div>{buttonsMap}</div>;

设ratingValue=[{val:1}，{val:2}，{val:3}，{val:4}，{val:5}，{val:6}]；
类规模扩展组件{
建造师（道具）{
超级（道具）；
this.handleButtonClicked=this.handleButtonClicked.bind（this）；
}
把手按钮单击（按钮编号、按钮值）{
console.log（“用户按下“+buttonNumber+”，评级为“+buttonValue”）；
}
render（）{
let buttonsMap=ratingValue.map（（按钮，索引）=>{
返回(
{button.val}
);
});
返回{buttonsMap}；

let ratingValue=[{val:1}，{val:2}，{val:3}，{val:4}，{val:5}，{val:6}]；
类规模扩展组件{
建造师（道具）{
超级（道具）；
this.handleButtonClicked=this.handleButtonClicked.bind（this）；
这个州={
所选值：空
}
}
把手按钮单击（按钮编号、按钮值）{
this.setState（{selected_value:buttonValue}）；
console.log（“用户按下“+buttonNumber+”，评级为“+buttonValue”）；
}
render（）{
const{selected_value}=this.state；
let buttonsMap=ratingValue.map（（项目，索引）=>{
//禁用已按下的按钮
返回(
{this.handleButtonClicked（index，item.val）}>
{item.val}
);
});
返回
{buttonsMap}
//如果未按下按钮，则禁用按钮
下一个
;

欢迎。因此，您的问题不适合这里。请仔细阅读：并写一个明确的问题：这个问题怎么不适合这里？我没有违反任何不问规则，我正在就一个特殊问题寻求帮助。您可以提供您的示例代码吗？您需要的是“提示”。那么您是否有问题？是的，请描述它是什么，您期望的是什么，并显示代码。您还要求提供“链接”，这也是不推荐的，请参见“谢谢”，但我收到一条错误消息：“X错误：超出了最大更新深度”。哦，抱歉。您无法直接调用函数到onClick方法。请替换onClick={this.handleButtonClicked（index，item.val）}与onClick={（）=>{this.handleButtonClicked（index，item.val）}非常感谢！非常感谢！

let ratingValue = [{ val: 1 }, { val: 2 }, { val: 3 }, { val: 4 }, { val: 5 }, { val: 6 }];

class Scale extends Component {
  constructor(props) {
  super(props);
  this.handleButtonClicked = this.handleButtonClicked.bind(this);
  this.state={
    selected_value:null
   }
}

handleButtonClicked(buttonNumber, buttonValue) {
 this.setState({selected_value:buttonValue});
 console.log("User Pressed " + buttonNumber + "with Rating of " + buttonValue);
}

render() {
const {selected_value}=this.state;
let buttonsMap = ratingValue.map((item, index) => {
//disable button which is pressed
  return (
    <button disabled={item.val==selected_value} key={index} onClick={()=>{this.handleButtonClicked(index, item.val)}}>
      {item.val}
    </button>
  );
});
return <div>
{buttonsMap}
//disable button if not button is pressed
<button disabled={!selected_value} >Next</button> 

</div>;