Как сделать на 1 кнопку 2 разных ссылки?

Question

У меня есть компонента состоящая из дива и кнопки, которая находится в 2-ух разных компонентах. Как сделать, чтобы при клике на кнопку в первой компоненте я переходил во второй компонент, а затем во втором компоненте при клике на эту же кнопку в этом же диве я переходил уже в 3-ий компонент?

class OrderDate extends Component {
  jump(){
    window.location.assign('http://localhost:3000/orderInfoClient');
  }

  render() {
    return(<div className={styles.orderDate}>
      <div className={styles.info}>
          <div className={styles.priceService}>
            Здесь будут цены и услуги
            <p></p>
          </div>
          <div className={styles.adress}>
            <p>{this.props.value + ' ' + this.props.time}</p>
            <p>Санкт-Петербург, Россия</p>
            <p>191002</p>
            <button onClick={() => this.jump()}>Продолжить</button>
          </div>
      </div>
    </div>)
  }
}

export default OrderDate;

Вот так она выглядит сейчас, но так она переходит только во 2-ую компоненту.

Answer 1

Передайте адрес перехода в качестве аргумента функции:

class OrderDate extends Component {
  jump(address){
    window.location.assign(address);
  }
  render() {
    return(<div className={styles.orderDate}>
      <div className={styles.info}>
          <div className={styles.priceService}>
            Здесь будут цены и услуги
            <p></p>
          </div>
          <div className={styles.adress}>
            <p>{this.props.value + ' ' + this.props.time}</p>
            <p>Санкт-Петербург, Россия</p>
            <p>191002</p>
            <button onClick={() => this.jump(this.props.address)}>Продолжить</button>
          </div>
      </div>
    </div>)
  }
}

export default OrderDate;

Затем передавайте адрес в виде свойства в компонент:

<Orderdate address="http://localhost:3000/orderInfoClient"/>

БЛОГ НА HUSL

Как сделать на 1 кнопку 2 разных ссылки?

Ответы (1 шт):