Как использовать один метод onClick и отправлять его на две разные страницы "/ admin" и "/ user" в React

Question

Я бы хотел изменить методы adminclicked () и userclicked () на один метод, который в функции mapDispacthClickToProps () может проверять, какое событие вызывается, и перенаправлять их на страницу "/ user" или "/ admin".Прямо сейчас он перенаправляет их только на страницу "/ admin".

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { roleSelect } from "./store";
import { connect } from "react-redux";

class RoleSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      role: ""
    };
    this.adminClicked = this.adminClicked.bind(this);
    this.userClicked = this.userClicked.bind(this);
  }
  adminClicked(event) {
    event.preventDefault();
    this.props.roleSelect("admin");
  }

  userClicked(event) {
    event.preventDefault();
    this.props.roleSelect("user");
  }

  render() {
    return (
      <div className="roleSelect">
        <form>
          <button color="primary" className="px-30" onClick={this.adminClicked}>
            Admin
          </button>
          <button color="primary" className="px-30" onClick={this.userClicked}>
            User
          </button>
        </form>
      </div>
    );
  }
}

function mapDispacthClickToProps(dispatch, props) {
  return {
    roleSelect: role => {
      props.history.push("/admin");
      dispatch(roleSelect(role));
    }
  };
}

export default withRouter(
  connect(
    undefined,
    mapDispacthClickToProps
  )(RoleSelect)
);

Answer 1

Я нашел ответ.Я использовал только один метод buttonclick () и проверил его с помощью target.name.И в mapDispatchClickToProps я закодировал некоторые условия if, чтобы проверить, является ли роль пользовательской, она перенаправляет на «/ user», если это admin, он перенаправляет на «/admin".

Вот код:

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { roleSelect } from "./store";
import { connect } from "react-redux";

class RoleSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      role: ""
    };
  }
  buttonClicked = event => {
    event.preventDefault();
    this.props.roleSelect(event.target.name);
  };

  render() {
    return (
      <div className="roleSelect">
        <form>
          <button
            color="primary"
            name="admin"
            className="px-30"
            onClick={this.buttonClicked}
          >
            Admin
          </button>
          <button
            color="primary"
            name="user"
            className="px-30"
            onClick={this.buttonClicked}
          >
            User
          </button>
        </form>
      </div>
    );
  }
}

function mapDispacthClickToProps(dispatch, props) {
  return {
    roleSelect: role => {
      if (role === "user") {
        props.history.push("/user");
      } else if (role === "admin") {
        props.history.push("/admin");
      }
      dispatch(roleSelect(role));
    }
  };
}

export default withRouter(
  connect(
    undefined,
    mapDispacthClickToProps
  )(RoleSelect)
);

Answer 2

По существу просто передайте role в mapDispacthClickToProps, вы жестко закодировали /admin, чтобы сделать его динамическим для значения, которое вы передаете.

import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { roleSelect } from "./store";
import { connect } from "react-redux";

class RoleSelect extends Component {
  constructor(props) {
    super(props);
    this.state = {
      role: ""
    };
    this.adminClicked = this.adminClicked.bind(this);
    this.userClicked = this.userClicked.bind(this);
  }
  adminClicked(event) {
    event.preventDefault();
    this.props.roleSelect("admin");
  }

  userClicked(event) {
    event.preventDefault();
    this.props.roleSelect("user");
  }

  render() {
    return (
      <div className="roleSelect">
        <form>
          <button color="primary" className="px-30" onClick={this.adminClicked}>
            Admin
          </button>
          <button color="primary" className="px-30" onClick={this.userClicked}>
            User
          </button>
        </form>
      </div>
    );
  }
}

function mapDispacthClickToProps(dispatch, props) {
  return {
    roleSelect: role => {
      props.history.push(`/${role}`);
      dispatch(roleSelect(role));
    }
  };
}

export default withRouter(
  connect(
    undefined,
    mapDispacthClickToProps
  )(RoleSelect)
);