如何动态设置选择选项？

问题描述

我有这些 JSON 对象：

[
  {
    id: "IYQss7JM8LS4lXHV6twn",address: "US",orderStatus: "On the way",},];

我想为订单状态提供一个选择选项。假设当前订单状态为“在途中”，则应禁用先前的订单状态“已确认”。我怎样才能动态地实现这一点？

到目前为止，这些是我的代码：

const status = () => {
  const [value,setValue] = useState("");
  const handleChange = (e) => setValue(e.target.value);

  return (
    <div>
          <FormControl>
            <InputLabel htmlFor="order-status">Order Status</InputLabel>
            <Select onChange={handleChange}>
              <MenuItem value={10}>Confirmed</MenuItem>
              <MenuItem value={20}>On the way</MenuItem>
              <MenuItem value={30}>Delivered</MenuItem>
            </Select>
          </FormControl>

          {/* <p>{value}</p> */}

    </div>
  );
};

export default status;

解决方法

首先，您需要使用适当的值初始化 value 状态。如果您的 api 返回 orderStatus 作为 On the way，则需要使用值 20

进行初始化

之后在 MenuItem 中，您可以通过如下简单的检查禁用其他选项：-

<MenuItem value={10} disabled={value > 10}>Confirmed</MenuItem>
<MenuItem value={20} disabled={value > 20}>On the way</MenuItem>
<MenuItem value={30} disabled={value > 30}>Delivered</MenuItem>

,

与其保持当前值作为状态，不如保持之前的值。有很多方法可以实现这一目标。

选项 1

const [[current,prev],setValues] = useState(["",null]);
const handleChange = e => setValues([e.target.value,current]);

选项 2

const [{ current,prev },setValue] = useState({current: "",prev: null});
const handleChange = e => setValue({
  current: e.target.value,prev: current
});

然后在 MenuItem

// value is one of [10,20,30] in your example
<MenuItem disabled={value === prev}/>