#reactjs
#reactjs
Вопрос:
После поиска в Google! Я не нашел никакого решения, пожалуйста, помогите!
У меня есть компонент с формой предварительной регистрации, который собирает электронную почту и ПАРОЛЬ, как показано ниже.
Я хочу передать адрес электронной почты и пароль для полной регистрации из другого компонента с перенаправлением
Сценарий :
- Заполните поля электронной почты и пароля
- нажмите btn Save => затем перенаправить на компонент / fullsignup
- Как я могу получить значение электронной почты и пароля в Fullsignup из компонента предварительной регистрации?
// presignup.js
const PreSignup = props => {
const [infos, setInfos] = useState({
email : '',
password : '',
isFilled : false
})
...
const handleChange = event => {
event.preventDefault();
const name = event.target.name;
const values = event.target.value;
setInfos({...infos, [name] : values})
}
const saveAndNext = event => {
event.preventDefault();
const presave = {
email : infos.email,
password : infos.password
}
setInfos({isFilled : true})
}
const {isFilled} = infos
if (isFilled) {
return (
<Redirect to={{
pathname :'/fill/3/profile/',
state : {infos || // anything you suggest}
}}/>
)
}
...
// fullsignup.js
const FullSignup = () => {
const [values, setValues] = useState({
email : // this is fill from Presignup
password : // this is fill from Presignup
name : ''
// ...others
})
// here i can use email and password without demanding new email and password!
//example
console.log(values.email, values.password) // return the values filled in Presignup component
return (
...
)
}
Комментарии:
1. Используете ли вы контекст или Redux для управления состоянием? Это ситуация, когда ваше приложение становится довольно сложным, и вам может потребоваться пересмотреть управление состоянием.
2. Нет, я не использую — useContext может это исправить? Раньше я не использовал контекст или Redux
Ответ №1:
Как я вижу из вашего кода, вы уже выполнили переход на страницу fullsignup с информацией о пользователе. Единственное, что вам нужно сделать, чтобы получить эти данные со страницы fullsignup. Когда вам нужны эти данные, вы можете получить их с помощью props.location.state.infos
Комментарии:
1. Спасибо @Murat Celik ! это работает, мне нужно добавить распространение для информации раньше
isFilled : true
в saveAndNext следующим образом :setInfos({...infos, isFilled : true})