当 TextField 在 Material UI 中聚焦时显示帮助文本

Question

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

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 之前不会显示错误消息。

在 Codesandbox 上尝试一下

Answer 1

最简单的解决方案是使用一个标志来保存有关 TextField 的单击（触摸）状态的信息。

例子：

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，但这完全取决于您何时希望将 TextField 分类为触摸 ( onBlur, onClick)