Question

我有2个selekta，它们具有选项参数。我希望当我单击第一个选择的“ Black White Pink Red Gray”，“ 1 2 3”，“ ABC”参数时，第二个选择将相应地更改为“ $ 10”，“ 20”，“ 30”。

function App() {
  const [category, setCategory] = useState("");

  return (
    <div className="App">
      <select
        value={category}
        onChange={({ target: { value } }) => {
          setCategory(value);
        }}
      >
        <option>{"Black"}</option>
        <option>{"White"}</option>
        <option>{"Pink"}</option>
        <option>{"Red"}</option>
        <option>{"Gray"}</option>
        <option>{"1"}</option>
        <option>{"2"}</option>
        <option>{"3"}</option>
        <option>{"A"}</option>
        <option>{"B"}</option>
        <option>{"C"}</option>
      </select>

      <select
        value={?}
        onChange={({ target: { value } }) => {
          //?
        }}
      >
        <option>{"$10"}</option>
        <option>{"$20"}</option>
        <option>{"$30"}</option>
      </select>
    </div>
  );
}

Answer 1

您需要为价格添加一个新的状态变量：

const [price, setPrice] = useState("");

，然后在类别的onChange处理函数中，可以在if语句中调用setPrice。

  if (value === "Red") {
     setPrice("$30");
  }

Working demo（在第一个选择中单击红色）

如何建立选择之间的关系

1 个答案: