也许这只是一个基本问题，但到目前为止还没有找到任何合理的解释。我最近是react和使用 MUI 的初学者。我不太清楚什么时候使用 Input vs.Textfield来构建表单？
查看文档，感觉就像TextField是Input可以做什么的超集，但不确定。MUI网站使用的实例TextField和Input两者没有说明一个比其他任何用例的好处。
请建议。
在 MUI 中，我们什么时候使用 Input 与 TextField 来构建表单？
IT技术
reactjs
input
material-ui
textfield
2021-04-10 10:12:06
2个回答
对于大多数用例，您应该使用TextField而不是它委托给的低级组件（例如Input）。
文档的相关部分在这里。
特别是这一行：
TextField 由较小的组件（ FormControl、Input、FilledInput、InputLabel、OutlinedInput 和 FormHelperText）组成，您可以直接利用它们来显着自定义表单输入。
使用这些低级组件的主要原因是，如果您需要以某种不支持使用TextField.
这是TextField组件的简化定义：
<FormControl {...other}>
{label && (
<InputLabel {...InputLabelProps}>
{label}
</InputLabel>
)}
{select ? (
<Select {...SelectProps}>
{children}
</Select>
) : (
<Input {...InputProps} />
)}
{helperText && (
<FormHelperText {...FormHelperTextProps}>
{helperText}
</FormHelperText>
)}
</FormControl>
如您所见，TextField不仅仅是一个Input，它包括：
FormControl：它只是一个上下文提供程序，用于将TextField状态（焦点、错误、悬停...）传递给子项并确保它们保持一致。您通常不必直接使用此组件。InputLabel：的标签TextField，Input并没有对自己的一个，所以如果你想要一个标签添加到您的Input，请使用TextField。FormHelperText: 位于 下方的帮助文本Input，用于描述TextField或显示表单验证中的某些错误消息。Input: 输入本身。实际上有在不同的变体3个输入组件：Input，OutlinedInput并且FilledInput其可以通过设置variant支柱中TextField。这是使用 的另一个原因TextField，而不是查找和导入不同的输入组件，您只需设置变体属性即可TextField知道要渲染什么。Select:TextField可以是一个Select或一个Input。设置selectprops以更改要选择的输入类型。
那么什么时候使用TextField？在您想要显示Input带有标签的表单中，并且有一种方法可以在干净的 API 中设置错误消息，这在大多数情况下都是如此。
什么时候使用Input？当你并不需要所有的除了上面的东西输入，或当你有需要的极端定制和API的TextField是不够的，你。
