javascript - 有什么方法可以为选择值设置条件语句？

Question

我的订单状态为“已确认”、“在途中”和“已交付”。如何设置这些状态的值以匹配我在选择选项中的值？

• 确认 - 10
• 在路上 - 20
• 已交付 - 30

在这种情况下，如果状态是“在路上”，那么之前的状态将被禁用。所以我想，也许我可以将已确认的状态设置为 10 等..

  const Orders = () => {
      const [status, setStatus] = useState("");
      const [value, setValue] = useState();
      const handleChange = (e) => setValue(e.target.value);
      return (
        <div>
              <form onSubmit={handleSubmit}>
                <FormControl>
               
                  <Select onChange={handleChange} value={value}>
                    <MenuItem value={10} disabled={value > 10}>
                      Confirmed
                    </MenuItem>
                    <MenuItem value={20} disabled={value > 20}>
                      On the way
                    </MenuItem>
                    <MenuItem value={30} disabled={value > 30}>
                      On the way (Delayed)
                    </MenuItem>
                    <MenuItem value={40} disabled={value > 40}>
                      Delivered
                    </MenuItem>
                  </Select>
                </FormControl>
                <Button type="submit">Submit</Button>
              </form>
        </div>
      );
    };

标签： javascriptreactjsmaterial-ui

Answer 1

根据我对您问题的理解，您希望Select根据动态status值限制组件的可用选项。

您可以改为禁用基于状态值的选项。为此，您需要将状态“映射”到与Select. 为简单起见，我们将使用您的 10、20、30 和 40 值。

const statusMap = {
  Confirmed: 10,
  "On the way": 20,
  "On the way (Delayed)": 30,
  Delivered: 40,
};

Orders - 使用一个status道具并将其disabled用于选项的属性。

const Orders = ({ status }) => {
  const [value, setValue] = useState(0);

  const handleChange = (e) => setValue(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    setValue(0);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <FormControl>
          <Select onChange={handleChange} value={value}>
            <MenuItem value={10} disabled={status > 10}>
              Confirmed
            </MenuItem>
            <MenuItem value={20} disabled={status > 20}>
              On the way
            </MenuItem>
            <MenuItem value={30} disabled={status > 30}>
              On the way (Delayed)
            </MenuItem>
            <MenuItem value={40} disabled={status > 40}>
              Delivered
            </MenuItem>
          </Select>
        </FormControl>
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
};

用法

<Orders status={statusMap[statusValueFromAPI]} />