валидация раскрывающегося списка материала пользовательского интерфейса? - PullRequest
Новая
       50

валидация раскрывающегося списка материала пользовательского интерфейса?

0 голосов
/ 16 июня 2020

Я пытаюсь проверить свое раскрывающееся поле, в котором, если значение пусто, поле должно иметь красную рамку, а текст красного цвета должен стать видимым, чтобы указать, что поле нельзя оставлять пустым. Я использую обычный javascript для проверки, хотя он может быть не идеальным, но, пожалуйста, дайте мне решение только в этом формате. Я использую document.getElementById, чтобы получить идентификатор ввода html. Однако я не могу проверить раскрывающийся список.

Вот мой код: 

<Grid item xs={6}>
          <FormControl
            id="UOM_Before"
            style={{ width: "80%" }}
            size="small"
          >
            <InputLabel
              htmlFor="UOM_Before"
              id="UOM_Before"
              style={{
                marginLeft: 10,
                top: "50%",
                transform: "translate(0,-50%"
              }}
            >
              UOM
            </InputLabel>
            <Select
              labelId="UOM_Before"
              id="UOM_Before"
              name="UOM_Before"
              onChange={handleChange("UOM_Before")}
              defaultValue={values.UOM_Before}
              variant="outlined"
              inputProps={{
                id: "UOM_Before",
                name: "age"
              }}
            >
              <MenuItem value="Nos">Nos</MenuItem>
              <MenuItem value="Percentage">Percentage</MenuItem>
              <MenuItem value="Metric">Metric</MenuItem>
            </Select>
          </FormControl>
          <label
            id="uom_before"
            style={{ visibility: "hidden", color: "red" }}
          >
            UOM cannot be left blank
          </label>
        </Grid>

Вот код для проверки: 

handleAddRow = () => {

         if (document.getElementById("UOM_Before").value == "") {
          document.getElementById("uom_before").style.visibility = "visible";
          document.getElementById("UOM_Before").style.border = "1px solid red";
        }  else {
          const item = {
            Kpi_Before: [],
            UOM_Before: "",
            Base_Before: "",
            Target_Before: "",
            dateTime: ""
          };
          this.setState({
            rows: [...this.state.rows, item]
          });
        }
      };
...