有人能用通俗易懂的语言解释一下FormControl函数是什么,以及为什么/如何使用它吗?
我在React中使用Material-UI,在许多表单示例中看到了FormControl的使用,但我很难理解它的作用,以及对于我的项目是否必要。
目前,我只是有一个名为Form.js的组件,并将所有表单元素包含在像这样的div中:
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple-accounts">Account</InputLabel>
<Select
multiple
value={accountName}
onChange={handleAccountChange}
input={<Input id="select-multiple-accounts" />}
renderValue={
selected => (
<div className={classes.chips}>
{
selected.map(value => (
<Chip key={value} label={value} className={classes.chip} />
))}
</div>
)}
MenuProps={MenuProps}
>
{accountNames.map(name => (
<MenuItem key={name.label} value={name.label} style={getStyles(name.label, accountName, theme)}>
{name.label}
</MenuItem>
))}
</Select>
</FormControl>
<br /><br />
<TextField
id="job-number"
label="Job #"
className={classes.textField}
value={props.jobNumber}
onChange={handleJobNumberChange}
fullWidth
/>
<br /><br /><br />
<TextField
id="project-description"
label="Project Description"
placeholder="Provide a detailed description of the project:"
className={classes.textField}
multiline
variant="outlined"
value={props.projectDescription}
onChange={handleProjectDescriptionChange}
fullWidth
/>
</div>
);
}
这样可以吗?还是我应该把所有内容都包裹在FormControl里面?如果是这样的话...你能解释一下为什么吗?在将表单编码到React Web应用程序中时,最佳实践是什么我不确定。我是React表单的新手。
谢谢。
FormControl
是由TextField
渲染的较低级别组件之一,因此如果您正在使用TextField
,则不需要显式使用FormControl
。 - Ryan Cogswell