React JS: программно используйте React-Router для отправки реквизита

То, что пытается выяснить этот вопрос, просто:

"Могу ли я программно отправлять реквизит из одной сцены в другую, и если да, то как?"

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

Файл приложения.js:

const Main = () => (
    <main>
        <Switch>
            <Route exact path='/Job' component={Job}/>
            <Route path='/Preview' component={Preview}/>
        </Switch>
    </main>

Работа.js:

Короче говоря, файл принимает ввод и выводит, как только пользователь нажимает кнопку «Отправить», эта функция вызывается:

 handleClick(){
    //The state I wish to pass: this.state.propToPass
    //my current implementation for moving to the correct scene:
    this.props.history.push('/Preview')

}

Предварительный просмотр.js

constructor(props){
    super(props)
    //console.log(the prop that has been sent)
}

Я буду бесконечно благодарен всем, кто понимает проблему и может пролить свет на мою дилемму.

Большое тебе спасибо.


reactjs react-router-dom react-router react-router-v4
person J Dorrian    schedule 19.11.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вот пример с withRouter. Это функция более высокого порядка, которая возвращает дочерний компонент с подключенным маршрутизатором, чтобы вы могли программно переключать маршруты.

Переходим к ответу, отправляя объект вместо строки. Вы можете указать данные для отправки в качестве состояния, присоединив свойство в объекте с именем состояние, которое будет состоять из данных, которые вы хотите отправить.

import React from 'react';
import {withRouter} from 'react-router-dom';

class Test extends React.Component {
  _handleClick = () => {
    this.props.history.push({
      pathname: '/roster',
      state: {
        'hello': 'world',
      }
    });
  }
  render() {
    return (
      <button onClick={this._handleClick}>Go To Roster Programmatically</button>
    )
  }
}

export default withRouter(Test);

person Win    schedule 19.11.2017
comment
Не уверен, как это относится к рассматриваемому вопросу, войдет ли это в мой файл Jobs.js? Как мне получить доступ к реквизиту из файла preview.js? - person J Dorrian; 19.11.2017
comment
@JDorrian А, моя песочница кода не сохранилась и вставила неправильную версию. См. приведенный выше пример. В ростере вы сможете получить доступ к props.location.state и найти { hello: 'world' }. - person Win; 19.11.2017
comment
большое спасибо, я пытался реализовать это в течение нескольких часов, вы просто сделали мой день! - person J Dorrian; 19.11.2017
comment
@JDorrian нет проблем! Извините за путаницу :) - person Win; 19.11.2017

arrow_upward
0
arrow_downward

Я настоятельно рекомендую использовать redux-form, так как он использует редьюсер для сохранения состояния формы. . Затем, после маршрутизации к нужному компоненту, вы также можете подключить этот компонент к состоянию формы, чтобы получить необходимую информацию. Это мощный инструмент, который помогает вам управлять состоянием форм, и это похоже на то, что вам нужно.

person Gilad Bar    schedule 19.11.2017
comment
Извините, @gilad, я немного отредактировал, когда публиковал это, чтобы попытаться сделать его более ясным, я обновил код, чтобы он больше отражал реальную проблему. - person J Dorrian; 19.11.2017
comment
Проблема здесь в том, что я не могу отправлять реквизит вместе с историей, когда я меняю сцены, я думал, что это было бы легко сделать, но, похоже, нигде не могу найти способ сделать это правильно. - person J Dorrian; 19.11.2017
comment
Я отредактировал ответ, надеюсь, это поможет. - person Gilad Bar; 19.11.2017
comment
Я не знаком с Redux, поэтому стараюсь не использовать его в этом проекте. Я начинаю думать, что это невозможно сделать без использования редукса :'( В любом случае, спасибо, Гилад - person J Dorrian; 19.11.2017