FormControl은 무엇에 사용됩니까?왜 쓰이죠?사용방법
FormControl이 어떤 기능을 제공하는지, 왜/어떻게 사용하고자 하는지 설명해 주실 수 있습니까?
React에서 Material-UI를 사용하고 있는데, FormControl을 사용하는 폼의 예가 많지만 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 웹 응용 프로그램에 코딩할 때 모범 사례가 무엇인지 잘 모르겠습니다.리액트 폼은 처음입니다.
감사해요.
공식 Material UI Documentation FormControl API에서 다음을 수행합니다.
양식 입력에 필요한 채워짐/집중/오류/과 같은 컨텍스트를 제공합니다.콘텍스트에 의존함으로써 높은 유연성을 얻을 수 있으며 FormControl의 자녀 간에 항상 일관된 상태를 유지할 수 있습니다.이 컨텍스트는 다음 컴포넌트에 의해 사용됩니다.
- 폼라벨
- 폼 헬퍼 텍스트
- 입력
- 입력 라벨
따라서 위의 기능을 사용하려면 폼을 FormControl 컴포넌트로 랩해야 합니다.
언급URL : https://stackoverflow.com/questions/58188214/what-is-formcontrol-used-for-why-is-it-used-how-should-it-be-used
'programing' 카테고리의 다른 글
| Java에서 JSON을 XML로 변환 (0) | 2023.02.15 |
|---|---|
| 이름이 지정되지 않은 다른 CacheManager가 동일한 VM에 이미 있습니다(ehCache 2.5). (0) | 2023.02.15 |
| 예외:'ngFor'는 알려진 네이티브 속성이 아니므로 바인딩할 수 없습니다. (0) | 2023.02.15 |
| 각도로 선택 초기화 중JS 및 ng-반복 (0) | 2023.02.15 |
| Angular의 필터에서 범위 변수에 액세스합니다.JS (0) | 2023.02.15 |