reactjs - 如何使用MUI(material ui)创建表单

Question

嗨，

我想在我当前的 React 项目中使用 mui。是否有比以下示例不同/更好的创建表单的方法？:

    const [companyName, setCompanyName] = useState<string>("");
    const [companyNameError, setCompanyNameError] = useState<boolean>(false);
    const changeName = (event: React.ChangeEvent<HTMLInputElement>) => {
        if(event.target.value === "") {
            setCompanyNameError(true);
        } else {
            setCompanyNameError(false);
        }

        event.preventDefault();
        setCompanyName(event.target.value);
    }

    const anyInputFieldEmpty = () => {
        var result = false;
   
        if(companyName === "") {
            setCompanyNameError(true);
            result = true;
        } else {
            setCompanyNameError(false);
        }
        
        // add the same check for all other fields. My real code has multiple input fields

        return result;
    }

    const resetFields = () => {
        setCompanyName("");
    }

    return (
        <div>
            <TextField
                required
                fullWidth
                label="Company Name"
                margin="dense"
                name="companyName"
                value={companyName}
                onChange={changeName}
                helperText={companyNameError ? "Company name is not allowed to be empty!" : ""}
                error={companyNameError}
            />

            <Button
                sx={{ alignSelf: 'center', }}
                variant="contained"
                onClick={() => {
                    if(!anyInputFieldEmpty()) {
                        onSubmitClick(); // some function from somewhere else, which triggers logic
                        resetFields(); // This form is in a popover. The values should be resetted before the user open it again.
                    }
                }}
            >
                Create
            </Button>
        </div>);

如果我使用多个文本字段(最多 9 个)，以这种方式进行验证感觉是错误的。它有很多样板代码，如果我添加进一步的验证规则(例如最小字符数)，它就会变得疯狂。

这是实现我的目标的正确方法吗？

T

Answer 1

正如其他人提到的。 Formik 和 Yup 非常适合验证。 Formik 还提供了一种轻松禁用提交按钮的方法。这是一个代码沙箱:https://codesandbox.io/s/long-butterfly-seogsw?file=/src/App.js