Как повесить на 1 кнопку переход на следующую страницу и передачу props-ов при нажатии на эту же кнопку?

Question

Помогите пожалуйста. На странице(в компоненте) есть 4 вида услуг с ценами(педикюр, маникюр и т.д. и цены). У меня есть кнопка, при клике на нее я перехожу из одного компонента в другой. Но мне так же нужно, чтобы эта кнопка при клике на нее, не только переходила в другую компоненту, но еще и передавала в следующую компоненту props(услуги и цены). Как мне это сделать?

Сейчас моя кнопка выглядит так

class Nails extends Component {


  onClick = (event) => {
    this.setState({time: event.target.innerText})
  };

  jump(){
    window.location.assign('http://localhost:3000/order');
  };

  render() {
    return(<div>
        <div className={styles.service}>
          <p className={styles.serviceName}>Педикюр</p>
          <p className={styles.price}>1 ч. 700 &#8381;</p>
          <button onClick={() => this.jump()}>Записаться</button>
        </div>
    </div>)
  }
}

export default Nails;

Answer 1

Для того, чтобы передать другому компоненту props из компонента, в котором вы меняете состояние, по факту достаточно, чтобы главный компонент передавал эти пропсы в виде statов, т.е связывал propsы этих двух компонентов. Например у нас есть 2 функциональных компонента, которые тащит за собой App

import React from "react";
import "./styles.css";

const FirstComponent = props => {
  return <div>{props.txt}</div>;
};

const SecondComponent = props => {
  return <input onChange={props.handl} />;
};

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { somestate: "" };
  }
  changehandler(event) {
    this.setState({ somestate: event.target.value });
  }
  render() {
    return (
      <div className="App">
        <FirstComponent txt={this.state.somestate} />
        <SecondComponent handl={this.changehandler.bind(this)} />
      </div>
    );
  }
}

В компонент с полем ввода мы передаем нашу функцию обработчик, которая будет вызываться каждый раз, когда поле ввода будет изменено(это видно из SecondComponent), в компонент содержащий блок текста мы передаем state из нашего основного объекта. Когда state меняется, соответственно меняется и props передаваемый дочернему элементу. P.S: Надеюсь, что это то, о чем вы спрашивали

БЛОГ НА HUSL

Как повесить на 1 кнопку переход на следующую страницу и передачу props-ов при нажатии на эту же кнопку?

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