material UI React中的表单验证-如何实现下拉列表的表单验证
material UI React中的表单验证-如何实现下拉列表的表单验证
提问于 2020-06-11 11:33:02
我是第一次使用react，我正在使用来自验证的material-ui，我试图通过获取HTML元素的id来验证表单。这是正常的，但每当我尝试验证一个下拉列表时，就会出现错误
无法读取未定义的属性'length‘。无法读取"Status“的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();
}
};状态之前的所有工作都很正常。一旦我们进入状态，它就会弹出错误
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-11 12:19:26
我不知道你为什么要在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>
);
}这是演示代码：codesandbox，这是官方docs link。
我希望这能帮到你!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62316601
复制相关文章
相似问题
腾讯云开发者
