programing

FormControl은 무엇에 사용됩니까?왜 쓰이죠?사용방법

goodjava 2023. 2. 15. 22:03

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