如何使材料UI的自动完成字段成为必需的？

Question

我尝试了几种方法来使材料UI的自动完成字段的类型成为必需，但是我没有得到想要的行为。我已经将字段封装在react hook形式name中，但是没有运气。当没有向字段添加任何内容时，我想在提交时触发消息“字段为必填”。

下面是代码段，我没有删除注释，因此其他人可以更轻松地理解我之前采用的方法-

+

Answer 1

您可以使用以下逻辑来使其工作。虽然这可能不是最好的解决方案，但确实有效。

<Autocomplete 
    renderInput={(params) => (
        <TextField
            {...params}
            label={value.length === 0 ? title : title + " *"} //handle required mark(*) on label 
            required={value.length === 0}
        />
    )}
/>

Answer 2

我尝试使用textfield中的内置要求来实现自动完成，它的工作原理很吸引人。也许您可以以此为参考。

<Autocomplete
    renderInput={(params) => {
        <TextField {...params} required />
    }
    // Other codes
/>

Answer 3

由于您正在呈现 <TextValidator>，因此您应该将强制（必需）属性应用于不在 <AutomComplete> 上的组件。