Как я могу передать реквизиты из текущего компонента в другой компонент, когда второй компонент вызывается по URL-адресу?

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

Пожалуйста, сначала прочитайте мой контекст, чтобы я мог помочь вам понять мою проблему.

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

  1. Сначала я хочу взять его мобильный номер только из одного поля ввода. когда он заполнит поле и нажмет кнопку "продолжить" -
  2. Я хочу взять ему другую страницу (компонент), откуда я могу взять его имя, пароль и т. д.

Здесь эти два компонента независимы друг от друга. Когда пользователь нажимает кнопку «Продолжить», я вызываю и перенаправляю его на другой компонент.

Теперь мой вопрос: Как мне сохранить этот номер мобильного телефона в 1-м компоненте и отправить во 2-й компонент

[Примечание: я не хочу, чтобы номер мобильного телефона отображался в URL-адресе при звонке по второму маршруту]

Первый компонент

export default class FirstComponent extends Component {
    render() {        
        return (
            <div>                
                <input type="text" placeholder="Type Mobile number" />
                <Link to={{ pathname: '/signup' }}>
                    <button>Continue</button>
                </Link>
            </div>
        )
    }
}

Второй компонент

export default class SecondComponent extends Component {
    render() {        
        return (
            <div>       
                <input type="text" placeholder="Type Mobile number" />

            </div>
        )
    }
}

Маршрутизатор

<Route exact path="/signup" render={(props) => {return <SecondComponent />} }/>

reactjs react-hooks react-state react-state-management
person Shamim    schedule 12.09.2019    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете сделать это следующим образом:

<Link to={{ pathname: '/signup', state: { number: 3199192910} }}>
                    <button>Continue</button>
                </Link>

И вы можете получить доступ к этому в своем компоненте регистрации, например:

import {withRouter} from 'react-router';

 class SecondComponent extends Component {
    render() { 
      // get the number 
      console.log(this.props.location.state.number)

        return (
            <div>       
                <input type="text" placeholder="Type Mobile number" />

            </div>
        )
    }
}

export default withRouter(SecondComponent);

Взгляните на этот пример, Quotes — это то, на что вам следует обратить внимание:

Редактировать благоговейный-swartz-044s2

person Praneeth Paruchuri    schedule 12.09.2019
comment
И что мне нужно делать, если у меня вместо класса функциональная составляющая? :) - person Michael Shkarubski; 19.10.2020

arrow_upward
1
arrow_downward

При нажатии кнопки вы можете вызвать функцию handleClick, а внутри этой функции вы можете использовать метод push для отправки реквизита. Таким образом, у вас будет больше контроля над тем, какое представление вы хотите отправить в другой компонент.

<button onClick={this.handleClick}>continue</button>

handleClick = () => {
    this.props.history.push({
      pathname: '/signup',
      state: { mobile: this.state.mobileNumber }
    })
}

Надеюсь, это поможет!!!

person tarzen chugh    schedule 12.09.2019

arrow_upward
1
arrow_downward

И здесь на помощь приходит Redux.

Redux — это библиотека JavaScript с открытым исходным кодом для управления состоянием приложения.

Итак, что происходит в редуксе: у нас есть нечто, называемое хранилищем, которое управляет всем состоянием приложения.
мы отправляем некоторые действия в хранилища, которые вызывают функцию, называемую редуктором, которая изменяет данные в хранить на основе действия, которое было отправлено. не волнуйтесь, если вы не поняли, что я сказал

просто посмотрите это 15-минутное видео, и вы полностью поймете, как использовать Redux в своем приложении и решить свою проблему
https://www.youtube.com/watch?v=sX3KeP7v7Kg

чтобы узнать больше, я рекомендую вам пройти
https://redux.js.org/basics/basic-tutorial

теперь, возвращаясь к вашей проблеме, все, что вам нужно сделать, это создать магазин, который сохраняет номер телефона, и когда пользователь нажимает кнопку «Продолжить», отправляет действие на уменьшение, чтобы сохранить номер телефона, и, таким образом, ваш номер телефона сохраняется во всем приложении и всякий раз, когда вы хотите получить доступ к телефону, просто напишите функцию mapstatetoprops, которая показана в видео, чтобы получить доступ к данным из хранилища и использовать их в этом компоненте.

Надеюсь, это решит вашу проблему

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

person Praneeth Kumar    schedule 12.09.2019
comment
Я ценю ваше хорошее объяснение. На самом деле я не хочу подключать свой мини-компонент к магазину избыточности. Мой текущий магазин редуксов немного взвешен. Я боюсь производительности, если я подключу такой маленький компонент к хранилищу избыточности. - person Shamim; 12.09.2019