Material UI React中的表单验证 - 如何实现下拉列表的表单验证

Question

我是新手，我正在使用来自验证的 material-ui，我试图通过获取 HTML 元素的 id 来验证表单。这很好，但每当我尝试验证下拉列表并发生错误时

无法读取未定义的属性“长度”。它无法读取“状态”的 ID。我该如何解决这个问题？

代码如下：

          <TextField
            label="Title"
            variant="outlined"
            size="small"
            name="Title"
            id="Title"
            placeholder="Enter the Title of the Best Practice"
            onChange={handleChange("Title")}
            defaultValue={values.Title}
            style={{ width: "80%" }}
          />
          <label id="title" style={{ visibility: "hidden", color: "red" }}>
            Title must be atleast 5 characters long
          </label>
          <br />

          <TextField
            placeholder="Enter the details of the Best Practice"
            label="Details of Best Practice"
            id="Details"
            size="small"
            name="Details"
            onChange={handleChange("Details")}
            defaultValue={values.Details}
            style={{ width: "80%" }}
            variant="outlined"
            multiline
            rows={4}
            rowsMax={8}
          />
          <label id="details" style={{ visibility: "hidden", color: "red" }}>
            Details of Best Practice must be atleast 10 characters long
          </label>
          <br />

          <TextField
            placeholder="What is the Best Practice?"
            label="What is the Best Practice"
            size="small"
            id="What"
            name="What"
            onChange={handleChange("What")}
            defaultValue={values.What}
            style={{ width: "80%" }}
            variant="outlined"
            multiline
            rows={4}
            rowsMax={8}
          />
          <label id="what" style={{ visibility: "hidden", color: "red" }}>
            What is the Best Practice must be atleast 10 characters long
          </label>

          <br />

          <TextField
            placeholder="Why was the Best Practice Implemented"
            label="Why was the Best Practice Implemented"
            size="small"
            name="Why"
            id="Why"
            onChange={handleChange("Why")}
            defaultValue={values.Why}
            style={{ width: "80%" }}
            variant="outlined"
            multiline
            rows={4}
            rowsMax={8}
          />
          <label id="why" style={{ visibility: "hidden", color: "red" }}>
            Why was the Best Practice implemented must be atleast 10 characters
            long
          </label>

          <br />
          <TextField
            placeholder="How was the Best Practice Implemented"
            label="How was the Best Practice Implemented"
            size="small"
            name="How"
            id="How"
            onChange={handleChange("How")}
            defaultValue={values.How}
            style={{ width: "80%" }}
            variant="outlined"
            multiline
            rows={4}
            rowsMax={8}
          />
          <label id="how" style={{ visibility: "hidden", color: "red" }}>
            How was the Best Practice implemented must be atleast 10 characters
            long
          </label>

          <br />
          <FormControl id="Status" style={{ width: "80%" }} size="small">
            <InputLabel
              htmlFor="Implementation Status"
              id="Status"
              style={{
                marginLeft: 10,
                top: "50%",
                transform: "translate(0,-50%"
              }}
            >
              Implementation Status
            </InputLabel>
            <Select
              labelId="Implementation Status"
              name="Status"
              id="Status"
              onChange={handleChange("Status")}
              defaultValue={values.Status}
              variant="outlined"
              inputProps={{
                id: "Implementation Status",
                name: "age"
              }}
            >
              <MenuItem value="Implemented">Implemented</MenuItem>
              <MenuItem value="Implementation in Progress">
                Implementation in Progress
              </MenuItem>
              <MenuItem value="Not Implemented">Not Implemented</MenuItem>
            </Select>
          </FormControl>
          <label id="status" style={{ visibility: "hidden", color: "red" }}>
            Implementation Status cannot be blank
          </label>

验证代码如下：

export class FormUserDetails extends Component {
  continue = e => {
    e.preventDefault();

    if (document.getElementById("Title").value.length < 5) {
      document.getElementById("title").style.visibility = "visible";
      document.getElementById("Title").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Details").value.length < 10) {
      document.getElementById("details").style.visibility = "visible";
      document.getElementById("Details").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("What").value.length < 10) {
      document.getElementById("what").style.visibility = "visible";
      document.getElementById("What").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Why").value.length < 10) {
      document.getElementById("why").style.visibility = "visible";
      document.getElementById("Why").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("How").value.length < 10) {
      document.getElementById("how").style.visibility = "visible";
      document.getElementById("How").style.border = "1px solid red";
      // keep form from submitting
    } else if (document.getElementById("Status").value.length < 1) {
      document.getElementById("status").style.visibility = "visible";
      document.getElementById("Status").style.border = "1px solid red";
      // keep form from submitting
    } else {
      // else form is good let it submit, of course you will
      // probably want to alert the user WHAT went wrong.

      this.props.nextStep();
    }
  };

直到状态的一切都正常。当我们到达 status 时，它会弹出错误

Answer 1

我不确定您为什么在 ReactJS 中使用纯 js 代码，Material-UI 为您提供了验证表单的便捷方法，您还编写了硬代码来更改颜色，以及大量重复，这不是高效。 让我们使用提供 Material 的酷方法，为什么不使用它，验证表单很容易。

如果它是空显示错误，我们如何检测下拉列表的值，否则，保持默认颜色，我们使用 React state 保持值 这是我为您的解决方案编写的代码：

export default function App() {
  const classes = useStyles();

  // DropDown State
  const [age, setAge] = React.useState("");
  const [error, setError] = React.useState(false);

  /*  Keeping value when selected **/
  const handleChange = event => {
    setAge(event.target.value);
  };

  // Showing Error
  const submitHandler = () => {
    console.log(age === "");
    if (age === "") {
      setError(true);
      return;
    }
    setError(false);

    // submitting logic here..
  };

  return (
    <div className={classes.root}>
      <FormControl className={classes.formControl}>
        <InputLabel shrink id="demo-simple-select-placeholder-label-label">
          Age
        </InputLabel>
        <Select
          labelId="demo-simple-select-placeholder-label-label"
          id="demo-simple-select-placeholder-label"
          value={age}
          onChange={handleChange}
          displayEmpty
          className={classes.selectEmpty}
          error={error}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
        <FormHelperText>Label + placeholder</FormHelperText>
      </FormControl>
      <Button
        onClick={submitHandler}
        variant="contained"
        className={classes.button}
      >
        Send
      </Button>
    </div>
  );
}

这里是Demo代码：codesandbox，这里是官方docs link。

我希望这会有所帮助！