材质 UI 选择防止关闭

时间:2021-02-23 12:53:36

标签: reactjs web select input material-ui

我正在为我的项目使用 Material UI,并且我有一个这样的 UI

enter image description here

如你所见,它有一个选择,当它打开时,我可以输入搜索与我想要的匹配的活动,这就是我所做的:

 <FormControl className={classes.formControl} color="secondary">
          <Select
            value={campaign}
            displayEmpty
            className={classes.selectEmpty}
            onChange={(e) => {
              if (e.target.value === '') {
                e.preventDefault();
                return false;
              } else setCampaign(e.target.value);
            }}
            onClose={(e) => {
              if (e.target.value === '') {
                e.preventDefault();
                return false;
              }
            }}
            inputProps={{'aria-label': 'Without label'}}
          >
            <MenuItem value="" className={classes.campaignSeachBox}>
              <div className={classes.campaignSeachBoxHeader}>
                <img
                  src={darkSignalTowerIcon}
                  className={classes.customedIcon}
                  alt=""
                />
                <span className={classes.customedText}>New Campaign</span>
              </div>
              <div className={classes.campaignSeachBoxInputContainer}>
                <SearchIcon fontSize="small" color="disabled" />
                <input
                  type="text"
                  className={classes.campaignSeachBoxInput}
                  placeholder="Search"
                />
              </div>
            </MenuItem>
            {['Metro_1125_Geo', 'DMA_1125_Geo', 'Other_1125_Geo'].map(
              (each, index) => (
                <MenuItem
                  value={each}
                  key={index}
                  className={classes.customedText}
                >
                  {each}
                </MenuItem>
              )
            )}
          </Select>
          <FormHelperText>Updated 6 days ago</FormHelperText>
        </FormControl>

如你所见,我把输入放在MenuItem的{​​{1}}之一,我设置输入的值为空字符串,当它被选中时,它将是阻止关闭 Select 但它没有解决

请告诉我如何处理,非常感谢,祝您有美好的一天

0 个答案:

没有答案