根据 ReactJS 中的下拉列表显示和隐藏字段

Question

我已经实现了，但是我错误地删除了代码……下面的例子可以帮助我显示 2 个状态。

import React, { useState } from 'react';

export default () => {
  const [show, setShow] = useState(true);

  return (
    <>
      <button
        type="button"
        onClick={() => {
          setShow(!show);
        }}
      >
        Mostrar {show ? 'Div 2' : 'Div 1'}
      </button>

      {show ? (
        <div style={{ color: 'red' }}>Div 1</div>
      ) : (
        <div style={{ color: 'blue' }}>Div 2</div>
      )}
    </>
  );
};

但我有一个包含四个选项的下拉列表，根据我选择的选项，它会在表单上显示不同的字段。

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

export default function App() {
  
const [animal, setAnimal] = useState(null);

  

  return (
    <div className="App">
      <>
      <div>
      <label htmlFor="tipoId" className="col-md-6">
      Select Animal
      </label>
      <select onClick={() => setAnimal(!animal)}>
        <option value="0" selected hidden>Horse</option>
        <option value="1" selected>Tiger</option>
        <option value="2">Lion</option>
        <option value="3">Panther</option>
      </select>
      </div>
      
     {
      animal === "1" ? 
         <> <div> TIGER</div> </> 
      : animal === "2" ? (
        <> <div>LION</div> </>
      ): (
        <> <div>PANTHER</div> </>
      )
    }
 </>
</div>   

); }

如您所见，当前代码不起作用，因为它只允许有 2 个状态，默认显示豹状态，如果选择另一个选项，它将只显示老虎状态，但狮子字段是从未展示过。以前我什至可以在下拉列表中包含 6 个选项，并且在选择这些选项时，它们会显示相应选项的字段。

我需要再次达到这一点:(

Answer 1

在这里您可以使用switch 大小写而不是if 或ternary operator，因为您需要检查多个条件。
请参阅下面的代码我添加了一个单独的函数getAnimalDiv，它将负责根据所选的option返回div。
并且当您设置状态 animal 而不是使用 !animal 时，将其设置为 event.target.value 以便您实际获得该状态中的选定值。
如果您执行!animal，它将仅设置true 和false，这在这种情况下没有用处。

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

export default function App() {

    const [animal, setAnimal] = useState(null);

    function getAnimalDiv(){
        switch(animal){
            case "0":
                return <div>TIGER</div>;
            case "1":
                return <div>LION</div>;
            case "2":
                return <div>PANTHER</div>;
            case "3":
                return <div>Other option</div>;
            default:
                return null;
        }
    }
    return (
        <div className="App">
            <>
                <div>
                    <label htmlFor="tipoId" className="col-md-6">
                        Select Animal
                    </label>
                    <select 
                    onClick={(event) => {
                        // here set target value to state which is 0, 1, 2, 3
                        setAnimal(event.target.value);
                    }}>
                        <option value="0" selected hidden>Horse</option>
                        <option value="1" selected>Tiger</option>
                        <option value="2">Lion</option>
                        <option value="3">Panther</option>
                    </select>
                </div>
                {getAnimalDiv()}
            </>
        </div>
    )
}