Tworzenie dodatkowych inputów po evencie - React

pytanie zadane 4 czerwca 2021 w JavaScript przez ShockWave Bywalec (2,350 p.)

Cześć,

uczę się React i mam problem z stworzeniem dodatkowych input.

import './SelectAndOptionsDishType.css';


function SelectAndOptionsDishType() {

  let Change = (event) => 
  {
    if (event.target.value === "1")
    {
      let pizzaType = "number";
      let pizzaPlaceholder = "Numbers of slices";
    }
  }

  return(
    <div>
    <select onChange={Change} placeholder={"select dish type"}>
        <option style={{display: 'none'}} value="" selected>Please Choose Dish Type</option>
        <option value="1">Pizza</option>
        <option value="2">Soup</option>
        <option value="3">Sandwish</option>
    </select>
    <input type={pizzaType} placeholder={pizzaPlaceholder}></input>
    </div>
  )
  } 
  
  export default SelectAndOptionsDishType;

Po wybraniu pizzy chciałbym wyświetlić dwa dodatkowe inputy, i nie mam pojęcia w jaki sposób mogę to napisać.

Z góry dziękuję za pomoc.

1 odpowiedź

odpowiedź 4 czerwca 2021 przez rafal.budzis Szeryf (85,700 p.)
wybrane 4 czerwca 2021 przez ShockWave

Najlepsza

Musisz skorzystać z stanu komponentu (hook useState). Gdy przypisujesz wartości poprostu do zmiennych komponent nie wie że są nowe dane na które powinien zareagować ;)


const [showPizzaInput, setShowPizzaInput] = useState(false);

return <div>
    <select onChange={e => setShowPizzaInput(e.target.value === "1")} placeholder={"select dish type"}>
        ....
    </select>
    {showPizzaInput && <input type="number" placeholder="Numbers of slices"></input>}
</div>