Я пытаюсь запрограммировать SPA в React / Material-UI, и у меня возникли некоторые проблемы.Я разработал модальное окно входа в систему, которое запускается с помощью кнопки на панели навигации.Когда пользователь нажимает «Отправить», я вызываю API-интерфейс бэкэнда, используя fetch, и в зависимости от результата возвращенного кода состояния я хочу открыть компонент закусочной с определенной информацией или закрыть окно модального входа в систему.
Я научилсяоткройте закусочные, нажав на ссылку, но как я могу открыть ее программно?Мне также нужно закрыть мое модальное окно после успешного вызова API, и я не знаю, как этого добиться.Я также могу добиться этого, нажав вручную на ссылку, которая привязана к исходной кнопке на панели навигации.
Я попытался использовать базовый пример снэк-бара из документов и поместить его в отдельный компонент, но он показывает только, как запустить его, нажав на ссылку, которая уже есть в реальном функциональном компоненте Snackbar.Мне нужно знать, как программно отображать снэк-бар из другого компонента.
Я почти уверен, что упускаю что-то очевидное:)
Реагирующий компонент Login.js
import React, {Component} from 'react'
import Button from '@material-ui/core/Button'
import TextField from '@material-ui/core/TextField'
import CustomizedSnackbars from './CustomSnackbars'
class LoginDialog extends Component {
constructor(props) {
super(props);
this.state = {username: "",
password: ""};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
<some code>
}
handleSubmit(event) {
event.preventDefault();
const data = {
"username":this.state.username,
"password":this.state.password
}
fetch("https://mywebsite.com/auth/login", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(function(response){
if (response.status === 200) {
console.log("good boye")
//---------------------------------
// WANT TO CLOSE LOGIN DIALOG HERE;
//---------------------------------
} else if (response.status === 401) {
console.log("naughty naughty")
//---------------------------------
// WANT TO DISPLAY SNACKBAR HERE
//---------------------------------
} else if (response.status === 502) {
console.log("off it's hinges, innit")
} else {
console.log("sumat went bang")
}
return response.json();
});
}
render() {
return (
<div className="modal-outer">
<div className="modal-inner">
<h3>Login</h3>
<TextField
/>
<br />
<TextField
/>
<Button variant="outlined" onClick={this.props.closePopup} color="secondary">
Cancel
</Button>
<Button variant="outlined" onClick={(event) => this.handleSubmit(event)} color="primary">
Login
</Button>
</div>
</div>
);
}
}
export default LoginDialog
Можно ли вызвать / создать какой-нибудь метод displaySnackbar для компонента Snackbar?Как я могу вызывать методы или функции на функциональных компонентах?
У меня есть реальная проблема с пониманием того, как React подходит друг другу.Я, конечно же, бэкэнд-разработчик, но в прошлом я использовал JQuery и другие фреймворки Javascript.
Любая помощь очень ценится!