Javascript 物料界面反应中的表单验证-如何实现下拉列表的表单验证

我是一个新手，我正在使用来自验证的MaterialUI，我试图通过获取HTML元素的id来验证表单。这是正常的，但每当我尝试验证下拉列表时，就会出现错误

无法读取未定义的属性“length”。无法读取“状态”的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>

标题长度必须至少为5个字符


最佳实践的详细信息长度必须至少为10个字符


最佳做法是，长度必须至少为10个字符


为什么实施的最佳实践必须至少包含10个字符
长的


最佳实践的实施方式必须至少为10个字符
长的


实施情况
实施
正在执行
未实施
执行状态不能为空

以下是验证代码：

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();
    }
  };

导出类FormUserDetails扩展组件{
继续=e=>{
e、 预防默认值（）；
if（document.getElementById（“Title”）.value.length<5）{
document.getElementById（“title”）.style.visibility=“可见”；
document.getElementById（“Title”）.style.border=“1px实心红色”；
//阻止表格提交
}else if（document.getElementById（“详细信息”）.value.length<10）{
document.getElementById（“详细信息”）.style.visibility=“可见”；
document.getElementById（“详细信息”）.style.border=“1px实心红色”；
//阻止表格提交
}else if（document.getElementById（“What”）.value.length<10）{
document.getElementById（“what”）.style.visibility=“可见”；
document.getElementById（“What”）.style.border=“1px实心红色”；
//阻止表格提交
}else if（document.getElementById（“为什么”）.value.length<10）{
document.getElementById（“为什么”）.style.visibility=“可见”；
document.getElementById（“为什么”）.style.border=“1px实心红色”；
//阻止表格提交
}else if（document.getElementById（“How”）.value.length<10）{
document.getElementById（“how”）.style.visibility=“可见”；
document.getElementById（“How”）.style.border=“1px实心红色”；
//阻止表格提交
}else if（document.getElementById（“Status”）.value.length<1）{
document.getElementById（“状态”）.style.visibility=“可见”；
document.getElementById（“Status”）.style.border=“1px实心红色”；
//阻止表格提交
}否则{
//否则表格就好了，让它提交吧，当然你会的
//可能想提醒用户出了什么问题。
this.props.nextStep（）；
}
};

---

状态之前的一切都正常。当我们进入状态时，会弹出错误

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

如果下拉列表的值为null，则我们可以检测其显示错误，否则，保留默认颜色，我们使用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>
  );
}

导出默认函数App（）{
const classes=useStyles（）；
//下拉状态
const[age，setAge]=React.useState（“”）；
const[error，setError]=React.useState（false）；
/*选择时保留值**/
const handleChange=事件=>{
设置（事件、目标、值）；
};
//显示错误
常量submitHandler=（）=>{
console.log（年龄=“”）；
如果（年龄=“”）{
设置错误（真）；
返回；
}
设置错误（假）；
//在这里提交逻辑。。
};
返回(
年龄
没有一个
十
二十
三十
标签+占位符
发送
);
}

这是演示代码：，这是官方的

---

我希望这有帮助！

您的inputLabel和Select的

id

相同，您需要更改其中一个的

id

。是的，但即使更改后仍会出现错误。您知道如何检查空下拉列表的值吗？您的验证代码是否无法访问状态变量

值

？不需要