Блог

Например, на странице 1 нам нужно нажать кнопку, и такую, чтобы нам нужно было перейти на страницу 2 с выбором какой-либо подходящей опции в MUI автозаполнения, и такую, чтобы onChange функция должна была сработать.

Пожалуйста, помогите мне с этим вопросом.

Ниже приведен код onChange функции и компонента автозаполнения MUI.
Можем ли мы выбрать опцию автозаполнения при переходе со страницы 1 на страницу 2?

 const handleFilterOnChange = name =gt; (e, data) =gt; {  const { filter } = selectedFilters;  let newFilterParams = {};  // If `clear` button is clicked, then remove it from the state first  if (!data || (data amp;amp; !data.value)) {  if (filter) {  const filterKeys = Object.keys(filter);  let index = -1;  if (filterKeys.length) {  if (  name === 'challenge' amp;amp;  filterKeys.includes('challenge')  ) {  index = filterKeys.indexOf('challenge');  newFilterParams = removeEmptyFilterParams(  filter,  filterKeys,  index  );  } else if (  name === 'softwareProduct' amp;amp;  filterKeys.includes('softwareProduct')  ) {  index = filterKeys.indexOf('softwareProduct');  newFilterParams = removeEmptyFilterParams(  filter,  filterKeys,  index  );  } else if (  name === 'techStack' amp;amp;  filterKeys.includes('techStack')  ) {  index = filterKeys.indexOf('techStack');  newFilterParams = removeEmptyFilterParams(  filter,  filterKeys,  index  );  }  }  // Remove the empty filter object because that gives incorrect empty response  // instead of returning all the data  if (  newFilterParams.filter amp;amp;  !Object.keys(newFilterParams.filter).length  ) {  newFilterParams = {};  }    }  } else {  newFilterParams = { filter: { ...filter, [name]: data.value } };    }  // HC_TEMP: Subject to be removed once the backend support is available  let newFilteredSolutions = [];  if (newFilterParams.filter) {  const { challenge, softwareProduct, techStack } =  newFilterParams.filter;  newFilteredSolutions = solutions  .map(  fch =gt;  ((challenge amp;amp;  softwareProduct amp;amp;  techStack amp;amp;  fch.challenge === challenge amp;amp;  fch.softwareProduct.includes(softwareProduct) amp;amp;  fch.techStack.includes(techStack)) ||  (challenge amp;amp;  softwareProduct amp;amp;  !techStack amp;amp;  fch.challenge === challenge amp;amp;  fch.softwareProduct.includes(  softwareProduct  )) ||  (challenge amp;amp;  !softwareProduct amp;amp;  techStack amp;amp;  fch.challenge === challenge amp;amp;  fch.techStack.includes(techStack)) ||  (!challenge amp;amp;  softwareProduct amp;amp;  techStack amp;amp;  fch.softwareProduct.includes(softwareProduct) amp;amp;  fch.techStack.includes(techStack)) ||  (challenge amp;amp;  !softwareProduct amp;amp;  !techStack amp;amp;  fch.challenge === challenge) ||  (!challenge amp;amp;  softwareProduct amp;amp;  !techStack amp;amp;  fch.softwareProduct.includes(  softwareProduct  )) ||  (!challenge amp;amp;  !softwareProduct amp;amp;  techStack amp;amp;  fch.techStack.includes(techStack))) amp;amp;  fch  )  .filter(Boolean);  } else {  newFilteredSolutions = [...solutions];  }  setFilteredSolutions(newFilteredSolutions);  setSelectedFilters({  sort: { ...selectedFilters.sort },  ...newFilterParams  });  // Reset activeCard to 0 if  setActiveCard(0);  // Update the challenge details  if (newFilteredSolutions.length) {  // Update if the user has permission to select a top solution or not  setCanISelectTopSolution(  newFilteredSolutions.map(  dItem =gt;  (userDetails.challenge.includes(dItem.challenge) amp;amp;  !dItem.isApproved amp;amp;  !selectedTSChallengeIds.includes(dItem.challenge) amp;amp;  !userDetails.solution.includes(dItem._id)) ||  (!selectedTSChallengeIds.includes(dItem.challenge) amp;amp;  dItem.isApproved)  )  );  } };  const removeEmptyFilterParams = (filter, filterKeys, index) =gt; {  // Remove empty key and return rest of the filter params  filterKeys.splice(index, 1);   return {  filter: filterKeys.reduce(  (obj, item) =gt; ({  ...obj,  [item]: filter[item]  }),  {}  )  }; };  

 lt;Autocomplete   size="small"  name="challenge"  id="hc-solutions-sponsor"  options={filters.challenge}  getOptionLabel={option =gt; option.label}  renderInput={params =gt; (  lt;TextField  {...params}  label="Challenge"  variant="outlined"  /gt;  )}  onChange={handleFilterOnChange('challenge')} /gt;