使用每個 select 元素選項運行不同的功能

Question

當用戶選擇選項時，我有兩個要運行的功能。 我試過有條件的。 它看起來像這樣，但 h2 不呈現。

  function a() {
    // some logic
    return <h2>{result of some logic}</h2>;
  }

  function b() {
    // some logic
    return <h2>{result of some logic}</h2>;
  }

  handleChange(e) {
    if (e.target.value == "a") {
      a()
    }
    else if (e.target.value == "b") {
      b()
    }
  }

  return (
    <select onChange={handleChange()}>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
  )

Answer 1

如果你想渲染 h2 a /h2 或 h2 b /h2 你必須將它存儲在一個變量中，然后在你的組件的返回中使用這個變量。

我可能會做這樣的事情：

const [title, setTitle] = useState();

  handleChange(e) {
    setTitle(e.target.value)
  }

  return (
<>
    <h2>{title}</h2>
    <select onChange={handleChange}>
      <option value="a">a</option>
      <option value="b">b</option>
    </select>
</>
  )