当文本字段聚焦在材质 UI 中时显示帮助程序文本

Question

我希望在用户单击文本字段之前不会显示错误消息。这是我的代码：

import React, { useState, useEffect }               from 'react';
import { TextField, Grid, Button }                  from '@material-ui/core';
const ReplyToComment = () => {
const [replyContent, setReplyContent] = useState();
const [errorMessage, setErrorMessage] = useState([]);
useEffect(() => {
if(replyContent) {
if(replyContent.length > 7){
setErrorMessage([]);
} else {
setErrorMessage(["Your answer is too short"])
}
} else {
setErrorMessage(["answer field can not empty"])
}
}, [replyContent]);
const handleChange = (event) => {
setReplyContent(event.target.value)
};

const handleSubmit = async () => {
console.log("************")
};
return (
<Grid container  spacing={4} alignItems="center" justify="center" >
<Grid item xs={12}>
<TextField
value={replyContent}
name="reply"
fullWidth
required
error={Boolean(errorMessage.length)}
multiline
label="answer"
helperText={errorMessage[0]}
onChange={handleChange}
/>
</Grid>
<Button onClick={handleSubmit} variant="contained" color="primary" disabled={Boolean(errorMessage.length)}>add</Button>
</Grid>
);
}

export default ReplyToComment;

这样，错误消息会在用户执行任何操作之前显示，但我希望在用户单击 TextField 之前不会显示错误消息。

在代码沙盒上试用

Answer 1

最简单的解决方案是使用一个标志来保存有关文本字段的单击(触摸(状态的信息。

例：

const ReplyToComment = () => {
const [replyContent, setReplyContent] = useState();
const [errorMessage, setErrorMessage] = useState([]);
const [touched, setTouched] = useState(false);
const handleTouch = () => {
setTouched(true);
};
// ...
return (
<Grid container  spacing={4} alignItems="center" justify="center" >
<Grid item xs={12}>
<TextField
value={replyContent}
name="reply"
fullWidth
required
onFocus={handleTouch}
error={touched && Boolean(errorMessage.length)}
multiline
label="answer"
helperText={touched && errorMessage[0]}
onChange={handleChange}
/>
</Grid>
<Button onClick={handleSubmit} variant="contained" color="primary" disabled={Boolean(errorMessage.length)}>add</Button>
</Grid>
);
}

我已经在onFocus上设置了值，但是当您希望将文本字段分类为触摸(onBlur，onClick(时，这完全取决于您