时间戳

首页 > 解决方案 > 如何从下拉列表本身重置选择中的项目

javascript - 如何从下拉列表本身重置选择中的项目

问题描述

我想从下拉列表本身中清除/删除/重置选择选项，而不是从外部按钮或allowClear

假设选择选项中的垃圾桶图标将重置所有值：

在此处输入图像描述

但是，我非常坚持如何使用我当前的以下代码重置值：

import st from "./AddToCartDropdown.module.css";
import {useState} from 'react';

import { Select } from 'antd';
import { DeleteFilled } from '@ant-design/icons';

const { Option } = Select;

function loopStock(n, selectedIndex){

    var elements = [];
    for(let i = 1; i <= n; i++){
      const qty = new String(i);
      const resultQty = qty.concat(" in cart");
      elements.push(<Option value={i}> <span className={st.addToCartSelect}> {i === selectedIndex ? resultQty : i} </span></Option>);
    }
    return elements;
}

const AddToCart = () => {
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const onChange = (newSelectedIndex) => {
    setSelectedIndex(newSelectedIndex);
  }
  
    return (
      <div >
        <Select defaultValue="Add to Cart" onChange={onChange} className={st.addToCartDefault} bordered={false}>
          <Option value="delete"> <DeleteFilled /> </Option>
          {loopStock(5, selectedIndex)}
        </Select>
    
      </div>
    );
  };
  
  export default AddToCart;

当我选择垃圾桶图标时，它应该显示我Add to Cart而不是垃圾桶图标： 在此处输入图像描述

问题是我很困惑在选择垃圾桶图标后如何设置状态以重置所有选项并返回到Add to Cart默认值Select。

我是 React/JavaScript 的新手，还在学习。在搜索了所有解决方案之后，我认为最好在这里创建我自己的问题。谢谢！

标签： javascriptreactjsnext.jsantd

解决方案

controlled您可以通过传递 value prop 并具有状态来将您的选择作为组件。将初始状态设置为null代替，-1以便我们可以使用占位符。

const [selectedIndex, setSelectedIndex] = React.useState(null);

when the selected value is deletewe are setting the state tonull

const onChange = (newSelectedIndex) => {
    if(newSelectedIndex === 'delete'){
      setSelectedIndex(null)
    }else {
      setSelectedIndex(newSelectedIndex)
    }
  }

现在在您的选择中添加valueand道具。placeholder

<Select placeholder="Add to Cart" value={selectedIndex} onChange={onChange}  bordered={false}>
          <Option value="delete"> <DeleteFilled /> </Option>
          {loopStock(5, selectedIndex)}
</Select>

推荐阅读