当另一个select字段使用react select更改时如何清除select字段

Question

所以我有两个选择字段。然后，第一个select字段用于类别；另一个用于子类别。当第一个字段更改时，第二个字段将更改要选择的选项列表，但第二个select字段的选定值仍然存在。所以我在想，当第一个值发生变化时，是否有办法取消选择第二个值。

代码：

import { useEffect, useState } from 'react';
// import categoryOptions from './categoryOptions';
import subcategoryOptions from './subcategoryOptions.json';
import Select from 'react-select';

    const Info = ({
      register,
      errors,
      product,
      setValue,
      getValues,
      watchAllFields,
      formStep,
      unregister,
    }) => {
      const categories = [
        { value: 'chocolate', label: 'Chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
      ];
    
      const [selectedCategory, setSelectedCategory] = useState(null);
      const [selectedSubcategory, setSelectedSubcategory] = useState(null);
      const [subcategoryArray, setSubcategoryArray] = useState();
      const [isChanged, setIsChanged] = useState(false);
    
      useEffect(() => {
        setSelectedSubcategory(null);
        if (selectedCategory) {
          const foundSubcategory = subcategories.filter(
            (item) => item.category === selectedCategory.value
          );
          if (foundSubcategory) {
            console.log(foundSubcategory);
            setSubcategoryArray(foundSubcategory);
          }
        }
        setIsChanged(true);
      }, [selectedCategory]);
    
      const subcategories = [
        { value: '', label: '⠀' },
        { value: 'eee', label: 'Chocolate', category: 'chocolate' },
        { value: 'e', label: 'zre', category: 'chocolate' },
        { value: 'es', label: 'Chooo', category: 'chocolate' },
        { value: 'strawberry', label: 'Strawberry' },
        { value: 'vanilla', label: 'Vanilla' },
      ];
    
      return (
        <section className='px-10'>
          <div className='flex flex-col'>
            <label htmlFor='title' className='pb-5 text-2xl text-white'>
              Title
            </label>
            <input
              type='text'
              name='title'
              className='text-white bg-indigo-900 border-indigo-900 input focus:bg-indigo-500'
              placeholder='Try something creative (Required)'
              maxLength={30}
              {...register('title', {
                required: {
                  value: true,
                  message: 'Title is required!',
                },
              })}
            />
            {errors.title && (
              <p className='mt-2 text-sm text-yellow-500'>{errors.title.message}</p>
            )}
            <h1 className='pt-10 pb-5 text-2xl text-white'>Gig Requierments</h1>
            <textarea
              type='text'
              name='Requirements'
              className='h-56 text-white bg-indigo-900 border-indigo-900 input focus:bg-indigo-500'
              {...register('requirements')}
            ></textarea>
    
            <h1 className='pt-10 pb-5 text-2xl text-white'>Category</h1>
            <Select
              defaultValue={selectedCategory}
              onChange={setSelectedCategory}
              options={categories}
            />
            <Select
              isClearable
              defaultValue={selectedSubcategory}
              onChange={setSelectedSubcategory}
              options={subcategoryArray}
            />
          </div>
        </section>
      );
    };
    

    export default Info;

任何帮助都将不胜感激。谢谢。

Answer 1

如果当前选定的子类别不在新类别中，只需将自定义处理程序传递给第一个Select，该处理程序将重置第二个Select的值：

const isSubcategory = (subcategory, category) => { /* returns true if subcategory is a subcategory of category */ }

const handleCategoryChange = useCallback(value => {
    if (!isSubcategory(selectedSubcategory, value)) {
        setSelectedSubcategory(null);
    }

    setSelectedCategory(value);
}, [selectedSubcategory])

<Select
    isClearable
    defaultValue={selectedCategory}
    onChange={handleCategoryChange}
    options={subcategoryArray}
/>

如果选定的子类别从来不是另一个类别的子类别，则甚至可以跳过检查。

这种效果并不是必需的。这都取决于本地州的变化。