Как передать выбранное значение из автозаполнения в другой компонент в Reactjs - PullRequest
0 голосов
/ 19 июня 2020

У меня есть один родительский компонент Questions и два дочерних компонента: Question1 и Question2. Question1 и Question2 возвращают AutoComplete component (от material-ui). Параметры Question2 должны основываться на том, что выбрано в Question1 (запрос graphql с использованием выбранного значения в качестве входных). Я много читал о том, как передавать значение между одноуровневыми компонентами, но не могу найти очевидного способа сделать это для этого случая. Мне просто нужно руководство, как к этому подойти.

Это структура моего кода:

export const Questions = ({ questionLabel }: QuestionsProps) => {
  return (<div>
    <Question1 />
    <Question2 />
  </div>
  )
    //-
    export const Question1 = () => {
    const [open, setOpen] = React.useState(false);
    const [options, setOptions] = React.useState([]);
    return (
      <Autocomplete
        open={open}
        onOpen={() => {
          setOpen(true);
        }}
        onClose={() => {
          setOpen(false);
        }}
        options={options}
        loading={loading}
        autoHighlight
        onChange={
          (event, value) => {
            console.log(value)
          }
        }
            //...
            )


      //-

            export const Question2 = () => {
      const [open, setOpen] = React.useState(false);
      const [options, setOptions] = React.useState([]);
      const { loading, data } = useQuery(query2, {
        variables: { selectedFromQuestion1: *** need the value here *** }});

    useEffect(() => {
      if (!open) {
        setOptions([]);
      } else {
        if (data) {
          setOptions(data.info.data);
        }
      }
    }, [open]);

  }
  return (
    <Autocomplete
      open={open}
      onOpen={() => {
        setOpen(true);
      }}
      onClose={() => {
        setOpen(false);
      }}
      options={options}
      loading={loading}
      autoHighlight
      onChange={
        (event, value) => {
          console.log(value)
        }
      }
            //...
            )

    -
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...