如何在另一个 select 字段随 react-select 更改时清除 select 字段

Question

所以我有 2 个 select 字段。然后第一个 select 字段用于类别；另一个用于子类别。当第一个字段更改时，第二个字段会更改要选择的选项列表，但第二个 select 字段的 selected 值仍然存在。所以我想知道是否有办法在第一个值发生变化时取消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}
/>

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

不需要效果。这完全取决于当地状态的变化。

如何在另一个 select 字段随 react-select 更改时清除 select 字段

How to clear a select field when another select field changes with react-select

reactjs

react-select