Как назначить кнопке значение в реакции

Question

Я создаю приложение и хочу создать компонент в React для ранжирования. Там, где у меня есть шесть разных кнопок со значениями от 1 до 6, и я хочу присвоить это значение, если пользователь нажмет 5, эта кнопка должна иметь значение 5. (возможно, из файла формата json), я изо всех сил пытаюсь выяснить, как это сделать Я думал о проведении опроса js, но это не подходит для моего приложения. Спасибо за любые советы.

Answer 1

im gona создаст простой компонент и покажет вам, как вы можете назначить значение каждой кнопке и получить его, давайте определим значения кнопок в объекте, чтобы вы могли заменить их файлом json позже.

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

class RateMyQuestion 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>;
  }
}