Select 标签，设置超过某个最大值的选项

Question

我正在尝试向我的 select 元素添加一个选项，以便能够选择超过特定值的最大选项。在本例中为 250。我尝试使用大于“>”的比较运算符 >250，但它似乎不接受该语法。怎么可能做到这一点？

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [minPrice, setMinPrice] = useState(0);
  const [maxPrice, setMaxPrice] = useState(50);

  const handlePrice = (value) => {
    switch (value) {
      case "1":
        setMinPrice(0);
        setMaxPrice(50);
        break;
      case "2":
        setMinPrice(50);
        setMaxPrice(100);
        break;
      case "3":
        setMinPrice(100);
        setMaxPrice(250);
        break;
      case "4":
        setMinPrice(250);
        setMaxPrice(>250); //doesn't work
        break;
      default:
        setMinPrice(0);
        setMaxPrice(50);
        break;
    }
  };

  return (
    <div className="App">
      <select
        className="custom-select"
        id="priceGroup"
        onChange={(event) => handlePrice(event.target.value)}
      >
        <option value="1">Under </option>
        <option value="2"> to 0</option>
        <option value="3">0 to 0</option>
        <option value="4">Over 0</option>
      </select>

      <div>Your min price is {minPrice}</div>
      <div>Your max price is {maxPrice}</div>
    </div>
  );
}

Answer 1

我从问题中了解到，当用户选择选项 4 时，您想显示“>250”。如果是这样，setMaxPrice(>250) 将不起作用，因为 >250 它不属于任何数据类型。您可以将它作为 setMaxPrice(">250") 之类的字符串传递下去，这应该有效。

Select 标签，设置超过某个最大值的选项

Select tag, setting option over a certain max value

javascript

reactjs

dropdown

react-hooks