如何将元素设置为popover材质ui的anchorEl?

时间:2020-10-12 08:34:00

标签: reactjs material-ui anchor popover anchorpoint

单击提交按钮后,如果显示空白,则显示为错误消息的弹出框应为空。

In this example FROM field is empty so the popover should display below it. Currently it is displaying below the submit button.

当前,anchorEl设置为e.currentTarget。如何选择“发件人”目的地的元素?

<Grid item xs sm={3}>
                        <Box className={classes.border} position="relative">
                          <IconButton
                            className={classes.changeBtn}
                            onClick={switchDestinations}
                            color="primary"
                          >
                            <SwapHorizIcon />
                          </IconButton>

                          <Box pl={2} pt={1}>
                            <Typography
                              className={classes.weight}
                              variant="caption"
                              color="textSecondary"
                            >
                              {t('search from').toUpperCase()}
                            </Typography>
                          </Box>

                          <Box pl={1}>
                            <AutoCompleteInput
                              renderOption={renderOption}
                              fetch={getCities}
                              value={from}
                              onChange={(_, value) => setFrom(value)}
                              array={array}
                              optionLabel={optionLabel}
                              label={t('search from').toUpperCase()}
                              placeholder={t('search from').toUpperCase()}
                              desktop
                            />
                          </Box>
                        </Box>

                        <Popover
                          // id={id}
                          open={open}
                          anchorEl={anchorEl}
                          onClose={handleClose}
                          anchorOrigin={{
                            vertical: 'bottom',
                            horizontal: 'center',
                          }}
                          transformOrigin={{
                            vertical: 'top',
                            horizontal: 'center',
                          }}
                        >
                          <Typography className={classes.typography}>
                            Please enter place of departure
                          </Typography>
                        </Popover>
                      </Grid>

0 个答案:

没有答案
相关问题