Как назначить кнопке другое значение, зависит от кнопки, нажатой в реакции

Question

Я создаю компонент в реакции, где пользователь должен выбирать между шестью различными кнопками, а затем, когда вы проверяете кнопку, вы можете нажать следующую кнопку. Я видел некоторые уроки с радиокнопками, но не с обычными кнопками. Это прототип: https://preview.uxpin.com/7fb204007fc97420378cd5c8e987a91e9a28d1bf# / pages / 122748926? Mode = i Любые советы или ссылки для помощи?

Answer 1

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>;

Answer 2

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>;