（React、MaterialUI、Context）MUI 自動完成/TextField 未在掛載時呈現其值

Question

我將 Material UI 的 Autocomplete 組件與他們的 TextField 組件結合使用。 除了一個問題外，一切都按預期工作。 TextField 未在安裝時呈現其輸入值。 我檢查了它是否收到了價值，但由於某種原因它不會顯示。

我要實現的功能是讓表單輸入即使在卸載/安裝時也保持其值 - 只要根 App 組件保持安裝狀態。 表單的 state 位於 Context 中應用程序的頂層。 該表單具有我提到的搜索字段、MUI Select 組件和提交按鈕。 我正在用 Select 組件做同樣的事情，這工作正常，只是不是自動完成/文本字段。 這個問題是否與自動完成特別相關？

上下文.js：

import React, { createContext, useState } from 'react';

const initialState = {
  autocompleteOptions: [],
  cohortInput: 13,
  searchInput: '',
};

const Context = createContext([{}, () => {}]);

export const ContextProvider = ({ children }) => {
  const [state, setState] = useState(initialState);
  return (
    <Context.Provider value={[state, setState]}>
      {children}
    </Context.Provider>
  );
}

export default Context;

SearchField.js：

import React, { useContext } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CloseIcon from '@material-ui/icons/Close';

import Context from '../../../Context';
import TextFieldWithAdornment from './TextFieldWithAdornment';

const SearchField = () => {
  const [context, setContext] = useContext(Context); // eslint-disable-line
  const { autocompleteOptions } = context;

  return (
    <Autocomplete
      closeIcon={<CloseIcon />}
      forcePopupIcon={false}
      freeSolo={!!autocompleteOptions}
      getOptionLabel={option => option}
      options={autocompleteOptions}
      renderInput={params => <TextFieldWithAdornment {...params} />}
    />
  );
};

export default SearchField;

TextFieldWithAdornment.js：

import React, { useContext } from 'react';
import SearchIcon from '@material-ui/icons/SearchTwoTone';

import Context from '../../../Context';
import { findMatches } from './helpers';
import { StyledInputAdornment, StyledTextField } from './styles';

const TextFieldWithAdornment = ({ InputProps, ...restProps }) => {
  const [context, setContext] = useContext(Context);
  const { searchInput } = context;

  const handleChange = ({ target: { value } }) => {
    const searchInput = value;
    const autocompleteOptions = value.length ? findMatches(value) : [];
    setContext({ ...context, autocompleteOptions, searchInput });
  };

  const handleBlur = () => {
    setContext({ ...context, autocompleteOptions: [] });
  };

  const startAdornment = (
    <StyledInputAdornment position="start">
      <SearchIcon />
    </StyledInputAdornment>
  );

  return (
    <StyledTextField
      InputProps={{ ...InputProps, startAdornment }}
      onBlur={handleBlur}
      onChange={handleChange}
      value={searchInput}
      {...restProps}
    />
  );
};

export default TextFieldWithAdornment;

隊列選擇.js：
（這是工作）

import React, { useContext } from 'react';

import Context from '../../../Context';
import {
  CohortSelectWrapper,
  StyledLabel,
  StyledMenuItem,
  StyledSelect,
} from './styles';

const CohortSelect = () => {
  const [context, setContext] = useContext(Context);
  const { cohortInput } = context;

  const handleChange = ({ target: { value } }) => {
    setContext({ ...context, cohortInput: value });
  };

  return (
    <CohortSelectWrapper>
      <StyledLabel>cohort</StyledLabel>
      <StyledSelect onChange={handleChange} value={cohortInput}>
        <StyledMenuItem value={11}>11</StyledMenuItem>
        <StyledMenuItem value={12}>12</StyledMenuItem>
        <StyledMenuItem value={13}>13</StyledMenuItem>
        <StyledMenuItem value={14}>14</StyledMenuItem>
      </StyledSelect>
    </CohortSelectWrapper>
  );
};

export default CohortSelect;

Answer 1

我剛剛想通了。 我將 TextField 作為受控表單組件，傳遞了 onChange 和 value 道具。 我需要使用“onInputChange”和“inputValue”道具來控制自動完成功能。

SearchField.js：

import React, { useContext } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CloseIcon from '@material-ui/icons/Close';

import Context from '../../../Context';
import TextFieldWithAdornment from './TextFieldWithAdornment';
import { findMatches } from './helpers';

const SearchField = () => {
  const [context, setContext] = useContext(Context);
  const { autocompleteOptions, searchInput } = context;

  const handleChange = event => {
    if (event) {
      const searchInput = event.target.value;
      const autocompleteOptions =
        event.target.value.length ? findMatches(event.target.value) : [];
      setContext({ ...context, autocompleteOptions, searchInput });
    }
  };

  const handleClear = () => {
    setContext({ ...context, autocompleteOptions: [] });
  };

  return (
    <Autocomplete
      closeIcon={<CloseIcon />}
      freeSolo={!!autocompleteOptions}
      getOptionLabel={option => option}
      inputValue={searchInput}
      onClose={handleClear}
      onInputChange={handleChange}
      options={autocompleteOptions}
      renderInput={params => <TextFieldWithAdornment {...params} />}
    />
  );
};

export default SearchField;

TextFieldWithAdornment.js：

import React, { useContext } from 'react';
import SearchIcon from '@material-ui/icons/SearchTwoTone';

import Context from '../../../Context';
import { StyledInputAdornment, StyledTextField } from './styles';

const TextFieldWithAdornment = ({ InputProps, ...restProps }) => {
  const [context, setContext] = useContext(Context);

  const handleBlur = () => {
    setContext({ ...context, autocompleteOptions: [] });
  };

  const startAdornment = (
    <StyledInputAdornment position="start">
      <SearchIcon />
    </StyledInputAdornment>
  );

  return (
    <StyledTextField
      InputProps={{ ...InputProps, startAdornment }}
      onBlur={handleBlur}
      {...restProps}
    />
  );
};

export default TextFieldWithAdornment;