Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.09.2020, 17:31
Аспирант
Отправить личное сообщение для djekokma Посмотреть профиль Найти все сообщения от djekokma
 
Регистрация: 09.10.2018
Сообщений: 36

React.js: Отрисовка по условию
Мне нужно отрисовать по условию дочерний компонент <Page1/>.
В текущей версии моего кода он не отображается. Если вставить в html разметку, то ошибок нет, компонент отрисовывается нормально.
Я думаю, что ошибка - в зоне видимости переменной p,находящейся в функции buttonSubmit. Зону видимости изменить у меня не получается.
Очень нужна помощь.
Спасибо.

Родительский компонент:

export default class App extends Component {
            data = {
                email: "a@b.net",
                password: "adc"
            }
        
            state = {
                email: "",
                password: ""    
            }
        
            emailChange=(e)=>{
                this.setState({email: e.target.value});
                }
            passwordChange=(e)=>{
                this.setState({password: e.target.value});
            }
        
            buttonSubmit=(e)=>{
            let p=this.state.email===this.data.email
            && this.state.password===this.data.password ? <div><Page1/></div> : alert('poi');
                e.preventDefault()
            }
        
            render() {
        
                return (
            <Container component="main" maxWidth="xs">
            <CssBaseline />
                <form  noValidate autoComplete="off"
                onSubmit={this.buttonSubmit}>
                    <div style={{marginTop:"150px"}}>
                        <Grid container spacing={2}>
                            <Grid item xs={12} >
                        <TextField
                                id="outlined-name"
                                label="e-mail"
                                variant="outlined"
                                value={this.state.email}
                                onChange={this.emailChange}/>
                            </Grid>
                                <Grid item xs={12} >
                                <TextField
                                    className="MuiInput-input"
                                    id="outlined-name"
                                    label="password"
                                    variant="outlined"
                                    value={this.state.password}
                                    onChange={this.passwordChange}/>
                                </Grid>
                            <Grid item xs={12}>
                            <Button
                                    style={{width:'210px'}}
                                    type="submit"
                                    fullWidth
                                    variant="contained"
                                    color="primary"
                                    >
                                    Enter
                                </Button>
                                </Grid>    
                                </Grid>
                            </div>
                        </form>
                </Container>
                );
            }
        }


Дочерний компонент:

const Page1 =()=>{
        return (
                <div style={{height: "100vh"}}>
                    <Header/>
                    <Grid container spacing={3}>
                        <Grid item xs={3}>
                            <Paper><ButtonPage/></Paper>
                        </Grid>
                        <Grid item xs={12}>
                            <Paper><ButtonWindow /></Paper>
                        </Grid>
                    </Grid>
                </div>
                );
    }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
React.js разработчик в команду (Удаленно, постоянная работа, от~130 т.р.) YuliyaKhomich Работа 0 22.06.2017 11:46
Senior Frontend в Cian.ru (React.js и TypeScript) Anna-HR Работа 0 19.03.2017 06:06
Ищем разработчиков Node.JS / React.JS в команду A-Team Работа 0 16.02.2017 18:44
Вывод по условию данных из xml OblivionR Общие вопросы Javascript 4 02.04.2014 17:01
Как подключить скрипт по условию RTEagle Общие вопросы Javascript 3 15.05.2013 13:43