У меня есть один родительский компонент 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)
}
}
//...
)
-