React-Select：如何在另一个选择值更改时清除选择值

Question

我的 productInfo 组件中有两个变体：Material 和尺寸 https://weiwhite.com/product/1

我正在尝试在 material 选择值更改时清除尺寸选项的值

<Select value={size} onChange={setSize} options={sizeOptions} isClearable/>

当material选项值改变时，上面的代码并没有清除sizeOptions之前的值。下面是整个代码

在productInfo.js

import React, {useEffect, useState} from 'react';
import { useStateValue } from '../StateProvider';
import './ProductInfo.css';
import Select from 'react-select';

function ProductInfo(props) {
    const [Product, setProduct] = useState({})
    const [{basket},dispatch]=useStateValue();

    useEffect(()=>{
        setProduct(props.detail)
      }, [props.detail])
      let minPrice=Product.variants?.map((p) => p.price)
      .sort((a,b)=>a-b)[0]

const [material, setMaterial] = React.useState();
const [size, setSize] = React.useState();

const materialOptions = Product.variants?.map((p) => p.material)
.filter((v, i, a) => a.indexOf(v) === i)
.map((material) => ({ label: material, value: material }))

const sizeOptions = Product.variants?.filter((p) => material && p.material === material.value)
.map((p) => p.size)
.filter((v, i, a) => a.indexOf(v) === i)
.map((size) => ({ label: size, value: size }));

const priceOptions = Product.variants?.filter((p) => size && p.size === size.value && material && p.material=== material.value)
.map((p) => p.price)
.filter((v, i, a) => a.indexOf(v) === i)
.map((price) => ({ label: price, value: price }));

let priceFinal={};
if (priceOptions?.length === 1){priceFinal=priceOptions[0].value}
else {priceFinal=minPrice + "+"}

const addToBasket=() =>{
  //dispatch the item into the data layer
  dispatch ({
     type:'ADD_TO_BASKET',
     item: {
       id: props.detail.id, 
       title: props.detail.title,
       image: props.detail.image,
       price: priceFinal,
     },
   });
};

return (
   <div className='prod__info'>
        
    <h1>{Product.title}</h1>
    <h5 className='prod__desc'>Description</h5>
    <p className='prod__text'>{Product.desc}</p>

    <p className='prod__price'>
            <small>$</small>
            <strong> {priceFinal}</strong>
    </p>
    <br />
    {/* selection option start */}
      <p className='prod__desc'>Material</p>
      <div >
      <Select value={material} onChange={setMaterial} options={materialOptions} isClearable/>
      </div>

      <p className='prod__desc'>Size</p>
      <div >
      <Select value={size} onChange={setSize} options={sizeOptions} isClearable/>
    </div>
    <br />
    <br />
    <div className='button__cart'>    
      <button className='prod__button'
          onClick={addToBasket}
        >
            Add to basket
    </button>
    </div>

</div>

)
}

export default ProductInfo

当material选择值改变时，如何清除之前的尺寸选择值？

Answer 1

您总是可以创建一个同时执行这两项操作的新函数并将其传递给 onClick

const changeMaterial = (picked) =>{
  setMaterial(picked.value);
  setSize(null)
}
<Select 
  value={material} 
  onChange={(picked)=>changeMaterial(picked)} 
  options={materialOptions} 
  isClearable
/>

或添加一个 useEffect，当 material 更改时将大小设置回 null：

useEffect(()=>{
  setSize(null)
},[material])

React-Select：如何在另一个选择值更改时清除选择值

React-Select: How to clear a selection value when another selection value change

reactjs

react-select