Как получить значения из кнопки реагирования на клике

Question

Я хочу сохранить значения кнопок, когда пользователь нажимает на них в реакции, и сохранить эти значения в массиве для дальнейшего использования.Однако, учитывая мои базовые знания в области REACT, я получаю ошибки и не могу этого сделать.

Я использую console.log в массиве настроек.Но я не получаю значения, хранящиеся в массиве настроек.

    class Dashboard extends Component {
      constructor(props) {
        super(props);
        this.state = {
          getPreferences: false,
          preferenceArray: []
        };

        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
      }
    handleClick() {
    this.setState(state => ({
      getPreferences: !state.getPreferences,
      preferenceArray: state.preferenceArray.push(this.handleClick.value)
    }));


  render() {
    const preference = this.state.preferenceArray;
    console.log(preference[0]);

    const { user } = this.props.auth;
    const { profile, loading } = this.props.profile;

    let dashboardContent;

    if (profile == null || loading) {
      dashboardContent = <Spinner />;
    } else {
      dashboardContent = (
        <h2>
          Select all issues that you are interested in:
          <hr />
          <br />
        </h2>
      );
    }

    return (
      <div className="dashboard">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <h1 className="display-4">Dashboard {dashboardContent}</h1>
              <button
                type="button"
                name="Abortion"
                value={this.state.name}
                className="btn btn-secondary"
                onClick={this.handleClick}
              >
                Abortion
              </button>
              &nbsp;&nbsp;&nbsp;
              <button
                type="button"
                name="GayMarriage"
                value="Gay"
                className="btn btn-secondary"
                onClick={this.handleClick}
              >
                Gay Marriage
                {"     "}
              </button>
              &nbsp;&nbsp;&nbsp;
              <button
                type="button"
                name="Guns"
                value="Guns"
                className="btn btn-secondary"
 onClick={this.handleClick}


             >
                Guns
                {"     "}
              </button>
              &nbsp;&nbsp;&nbsp;
              <button
                type="button"
                name="HIR"
                value={this.state.name}
                className="btn btn-secondary"
              >
                Higher Interest Rates
                {"     "}


                onClick={this.handleClick}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

Ну, из того, что я знаю, все, что вам нужно сделать, это просто использовать "событие", чтобы получить значение.

, например.

handleClick(e) {
//e- the event
this.setState(state => ({
  getPreferences: !state.getPreferences,
  preferenceArray: state.preferenceArray.push(e.target.value)// the event traget value
}));