react-select как корректно вызвать очищение значения из другого select

Question

на форме присутствуют 4 select от компонента react-select. Заполняются из json необходимо, когда значение select меняется, чтобы очищались 3 нижних. подскажите как сделать пробовал через ref clearvalue() не получилось.

import React, {useEffect,useRef,useState} from 'react'
import {Cookies}from "react-cookie";
import Select from 'react-select';

const cookies = new Cookies();


const GetCat = () =>{
    const [facultet, setFacultet] = useState([])
    const [standart, setStandart] = useState([])//Стандарт
    const [edLevel, setEdLevel] = useState([])//Уровень подготовки
    const [spec, setSpec] = useState([])
    const [isLoading, setIsLoading] = useState(false)   

    const fetchFac =  async() => {//получить категории
        setIsLoading(true)
        const response = await fetch('https://127.0.0.1/webservice/rest/server.php?moodlewsrestformat=json&wstoken='+
                                        cookies.get('token')+'&wsfunction=core_course_get_categories')      
        const data = await response.json()
        var caty = JSON.stringify(data)
        var caty2 = JSON.parse(caty)
        caty2.sort((a,b) => a.id - b.id)
        let caty3 = []
        for (var i in caty2){
            if(caty2[i].parent === 59&&caty2[i].idnumber !== ""){               
                caty3.push({value: caty2[i].id, label: caty2[i].name})
            }
        }
        setIsLoading(false)
        setFacultet(caty3)
    }
    useEffect (() =>{
        fetchFac()
    },[])

    const facChange = async(selected:string[])=>{
        const response = await fetch('https://127.0.0.1/webservice/rest/server.php?moodlewsrestformat=json&wstoken='+
                                    cookies.get('token')+'&wsfunction=core_course_get_categories')      
        const data = await response.json()
        var stand = JSON.stringify(data)
        var stand2 = JSON.parse(stand)
        stand2.sort((a,b) => a.id - b.id)
        let stand3 = []
        for (var i in stand2){
            if(stand2[i].parent === selected.value &&stand[i].idnumber !== ""){               
                stand3.push({value: stand2[i].id, label: stand2[i].name})
            }
        }
        setIsLoading(false)
        setStandart(stand3)
    }

    const standChange = async(selected:string[])=>{
        console.log(selected.value)    
        const response = await fetch('https://127.0.0.1/webservice/rest/server.php?moodlewsrestformat=json&wstoken='+
                                        cookies.get('token')+'&wsfunction=core_course_get_categories')      
        const data = await response.json()
        var stand = JSON.stringify(data)
        var stand2 = JSON.parse(stand)
        stand2.sort((a,b) => a.id - b.id)
        let stand3 = []
        for (var i in stand2){
            if(stand2[i].parent === selected.value &&stand[i].idnumber !== ""){               
                stand3.push({value: stand2[i].id, label: stand2[i].name})
            }
        }
        setIsLoading(false)
        setEdLevel(stand3)
    }

    const specChange = async(selected:string[])=>{
        console.log(selected.value)    
        const response = await fetch('https://127.0.0.1/webservice/rest/server.php?moodlewsrestformat=json&wstoken='+
                                        cookies.get('token')+'&wsfunction=core_course_get_categories')      
        const data = await response.json()
        var stand = JSON.stringify(data)
        var stand2 = JSON.parse(stand)
        stand2.sort((a,b) => a.id - b.id)
        let stand3 = []
        for (var i in stand2){
            if(stand2[i].parent === selected.value &&stand[i].idnumber !== ""){               
                stand3.push({value: stand2[i].id, label: stand2[i].name})
            }
        }
        setIsLoading(false)
        setSpec(stand3)
    }

    return (
        <div style={{margin: "20px",}}>
          {isLoading && <p>Загрузка...</p>}
          <label>Выберите факультет :</label>
          <Select
              options={facultet}
              className = "basic-single"
              classNamePrefix="select"
              onChange={facChange}
              
          />
          
          <div>
              <label>Выберите стандарт :</label>
              <Select 
                  
                  options={standart}
                  className = "basic-single"
                  classNamePrefix="select"
                  onChange={standChange}
                  
              />
          </div>
  
          <label>Выберите уровень образования :</label>
          <Select 
              
              options={edLevel}
              className = "basic-single"
              classNamePrefix="select"
              onChange={specChange}
              
               
          />
  
          <label>Выберите направление подготовки :</label>
          <Select 
              options={spec}
              className = "basic-single"
              classNamePrefix="select"
              onChange={standChange}
          />
  
        </div>
      )
  }
  export default GetCat

Answer 1

@SwaD натолкнул на идею как реализовать данную штуку!!!! в каждый селект были добавлены значения value при изменении самого первого селекта обнуляется отображение всех нижних))) ну и сделал один забрал в базу а не как было до этого))

import React, {useEffect,useState} from 'react'
import {Cookies}from "react-cookie";
import Select from 'react-select';

const cookies = new Cookies();


const GetCat = () =>{
    const [facultet, setFacultet] = useState([])//Факультеты
    const [standart, setStandart] = useState([])//Стандарт
    const [edLevel, setEdLevel] = useState([])//Уровень подготовки
    const [spec, setSpec] = useState([])
    const [dataM, setDataM] = useState([])
    const [isLoading, setIsLoading] = useState(false)
    
    const [value, setValue] = useState("");
    const [value1, setValue1] = useState("");
    const [value2, setValue2] = useState("");

    const reset = () => {
        setValue("");
        setValue1("");
        setValue2("");
    };


    const dataCatalog = async() => {//запрос данных
        setIsLoading(true)
        const response = await fetch('https://127.0.0.1/webservice/rest/server.php?moodlewsrestformat=json&wstoken='+
                                        cookies.get('token')+'&wsfunction=core_course_get_categories')
        const data = await response.json()
        var caty = JSON.parse(JSON.stringify(data))
        caty.sort((a,b) => a.id - b.id)
        setIsLoading(false)
        setDataM(caty) 
    }

    useEffect (() =>{
        dataCatalog()
    },[])

    const facultetSelect = ()=>{//список факультетов
        let facultetList = []
        for (var i in dataM){
            if(dataM[i].parent === 59&&dataM[i].idnumber !==""){
                facultetList.push({value: dataM[i].id, label:dataM[i].name})
            }
        }
        setFacultet(facultetList)
        
    }
    
    const facChange = async(selected:string[])=>{//Загрузка стандарта
        let stand3 = []
        for (var i in dataM){
            if(dataM[i].parent === selected.value &&dataM[i].idnumber !== ""){               
                stand3.push({value: dataM[i].id, label: dataM[i].name})
            }
        }
        setStandart(stand3)
        reset()
        
    }

    const standChange = async(selected:string[])=>{//Загрузка уровня образования
        let stand3 = []
        for (var i in dataM){
            if(dataM[i].parent === selected.value){               
                stand3.push({value: dataM[i].id, label: dataM[i].name})
            }
        }
        setEdLevel(stand3)
        setValue(selected);
    }     
  
    const specChange = async(selected:string[])=>{//загркзка специальностей
        let stand3 = []
        for (var i in dataM){
            if(dataM[i].parent === selected.value){               
                stand3.push({value: dataM[i].id, label: dataM[i].name})
            }
        }
        setSpec(stand3)
        setValue1(selected);
    }

    const courseSelect = async(selected:string[])=>{
        
        setValue2(selected);
    }

    return (
      <div style={{margin: "20px",}}>
        {isLoading && <p>Загрузка...</p>}
        <label>Выберите факультет :</label>
        <Select
            options={facultet}
            className = "basic-single"
            classNamePrefix="select"
            onChange={facChange}
            onMenuOpen={facultetSelect}            
        />
        
        <div>
            <label>Выберите стандарт :</label>
            <Select
                value={value}                
                options={standart}
                className = "basic-single"
                classNamePrefix="select"
                onChange={standChange}
                
            />
        </div>

        <label>Выберите уровень образования :</label>
        <Select 
            value={value1}
            options={edLevel}
            className = "basic-single"
            classNamePrefix="select"
            onChange={specChange}
             
        />

        <label>Выберите направление подготовки :</label>
        <Select
            value={value2} 
            options={spec}
            className = "basic-single"
            classNamePrefix="select"
            onChange={courseSelect}
            
        />

        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>

      </div>
    )
}
export default GetCat

БЛОГ НА HUSL

react-select как корректно вызвать очищение значения из другого select

Ответы (1 шт):