MUI가 포함된 동적 연관 드롭다운 목록

내가 보기에 사용자 체험의 측면에서 볼 때 광택 응용과 미광택 응용을 구분하는 가장 중요한 요소 중 하나는 사용자의 입력 방법이다.일부 최초의 응용 프로그램을 개발할 때 많은 상황을 만날 수 있습니다. 이러한 상황에서 간단한 입력 폼을 사용해서 사용자가 원하는 내용을 입력할 수 있도록 할 수도 있습니다. 실제적으로 그들이 선택할 수 있는 특정한 내용의 수량은 한계가 있습니다. 예를 들어 API나 데이터베이스에 조회를 제출할 때입니다.API 및 Material UI의 Autocomplete 구성 요소 및 이 블로그에 소개할 추가 기술을 입력합니다.
Material UI는 완전히 독립된 주제입니다. 여기에서 알 수 있습니다: https://material-ui.com/getting-started/installation/. 그러나 본질적으로 이것은 스타일 라이브러리입니다. 많은 아름다운 모듈화 구성 요소를 포함하고 있습니다. 이 구성 요소들은 Autocomplete를 쉽게 설정할 수 있습니다. 물론 그 중 하나입니다.
만약에 연도, 브랜드와 모델에 따라 세분화된 차량 선택 입력 화면을 설정하고 싶다면 이것은 동적 관련 드롭다운 목록이 필요할 수 있는 흔한 장면이다.이것은 동적이다. 차형이 해마다 변화하기 때문에 새로운 연도와 차형은 이 목록에 추가되는 것을 영원히 멈추지 않을 것이다. 그리고 등장하는 브랜드는 선택한 연도에 달려 있고 차형은 선택한 브랜드에 달려 있기 때문이다.다행히도, 이런 피드 목록에 전문적으로 사용되는 API가 많다.자동차를 예로 들면 연료의 경제성이다.gov는 이 정확한 용례에 API를 제공했다.
선택 화면을 처음 불러올 때, 이 예에서 연도 선택을 위한 메뉴의 맨 윗부분을 만들어야 합니다.이 예에 대해 React에서 우리는 useEffect()(또는 componentDidMount())을 사용하여 이 점을 실현할 수 있다.

const [car, setCar] = useState({});
const [years, setYears] = useState([]);
const [makes, setMakes] = useState([]);
const [models, setModels] = useState([]);

useEffect(() => {
  axios.get('https://www.fueleconomy.gov/ws/rest/vehicle/menu/year')
    .then(({ data }) => {
      setYears(data.menuItem.map((item) => item.value));
    });
}, []);

위에서 보듯이 우리는 useState()을 사용하여 각 목록의 값을 저장하고 세 번째 드롭다운 메뉴를 완성한 후에 선택한 자동차를 사용한다.위의 GET 요청은 모든 연도의 목록을 검색하여 years 배열에 넣습니다.현재 우리는 이미 연도를 채웠으니, 그것들을 목록으로 표시해야 한다.
내가 언급한 바와 같이 재료 UI의 설정은 상당히 간단하고 자동 완성 상자가 있어야 한다.자동 완성 상자 설정 및 가져오기 정보: https://material-ui.com/api/autocomplete/

<Autocomplete
  onChange={(_, year) => getMakes(year)}
  options={years}
  renderInput={(params) => (
    <TextField {...params} label="Year" variant="outlined" />
  )}
/>

우리 한 줄 한 줄 그것을 분해합시다.Automated Complement 어셈블리에서는 먼저 다음을 수행할 수 있습니다.
onChange - 두 번째 매개변수가 선택한 실제 항목인 콜백 함수를 적용합니다.여기서 1년이 선택되면 우리가 만들 다른 함수인 getMakes()에 전달되기 때문에 그 해에 특정된make를 생성합니다.
옵션 - 메뉴 옵션이 포함된 배열만 가리킵니다.
renderInput - 실제 입력 상자를 만드는 리셋 함수를 가져옵니다. (이 예는 MUI 텍스트 필드입니다.)
이제 앞에서 언급한 getMakes() 함수를 살펴보겠습니다. 이 함수는 만들어야 합니다.

const getMakes = (year) => {
  setModels([]);
  setCar({ year, make: '', model: '' });
  axios.get(`https://www.fueleconomy.gov/ws/rest/vehicle/menu/make?year=${year}`)
    .then(({ data }) => {
      setMakes(data.menuItem.map((item) => item.value));
    });
};

보시다시피 사용자가 이전에 어떤 내용을 선택했다면, 이 함수는 먼저 models 진열을 리셋합니다.그리고 나서 자동차는 해마다 절약할 수 있었고, 또 다른 종점은 연료의 경제성이었다.gov for Get makes from a selected year는 makes 배열을 채우는 데 사용됩니다.
그리고 우리는 브랜드 선택 상자가 생겼다.

<Autocomplete
  onChange={(_, model) => getModels(model)}
  disabled={!makes.length}
  key={makes}
  options={makes}
  renderInput={(params) => (
    <TextField {...params} label="Make" variant="outlined" />
  )}
/>

주의해야 할 유일한 차이점은 이 드롭다운 목록은 위쪽의 드롭다운 목록에 의존하기 때문에 선택할 수 있는 옵션이 있기 전에 비활성화하고, 옵션이 변경되면 변경해야 한다는 것이다.이것이 바로 우리가 아래 아이템을 추가한 이유입니다.
비활성화 - 간단한 부울 값이 경우 !makes.length으로 설정하고,make수 그룹이 비어 있으면 disabled이 진짜가 됩니다.
키 - 이 경우 연도를 변경하여 API에서 새 Make 세트를 읽어들이면 드롭다운 메뉴에서 선택 및 항목만 재설정할 수 있습니다.getModels() 기능 및 드롭다운 메뉴는 기본적으로 이전과 같아야 합니다.한마디로 Material UI에서 자동으로 완료하는 것은 동적 연관 드롭다운 목록을 설정하는 매우 간단한 방법입니다.도시/주에서 화면을 선택하는 등 여러 가지 경우에도 사용할 수 있습니다. 이 경우 전체 API 검색 방법을 건너뛰고, 도시와 주가 자주 바뀌지 않기 때문에 선택 옵션을 간단하게 정적 그룹으로 설정할 수 있습니다.나는 이 시연이 어느 정도 너에게 유용하길 희망하며, 노력 중에 행운이 있기를 바란다.
감사합니다!