Показать разделение Div из выбранной опции - компоненты без состояния

Question

Я новичок в реакции и редукции. Я пытаюсь вызвать / показать раздел после того, как пользователь выбрал значение параметра c. Этот выбор будет заполнен через API (я могу справиться с этим), но сейчас, например, если у меня есть код ниже

const Student = ({key}) = > {
  return (
      <React.Fragment>
         <div>
            <select>
                <option value="markJ">Mark J.</option>
                <option value="maryA">Marry A.</option>
                <option value="peterM">Peter M</option>
            </select>
         </div>
         <div id="showThisDiv">
            <input type="text" placeholder="age" />
         </div>
      </React.Fragment>

  );
};
export default Student

Например, если я хочу показать div с id # showThisDiv после того, как опция со значением maryA была выбрана, как бы я это сделал sh? Я пытаюсь сделать это только в функциональном компоненте.

Answer 1

Вам необходимо использовать состояние для сохранения выбранной опции. Когда значением состояния является maryA, тогда показывать showThisDiv. Нет необходимости использовать id="showThisDiv".

const Student = ({key}) = > {
  const [selected, setSelected] = useState()

  const handleChange = (event) => {
     setSelected(event.target.value)
  }

  return (
      <React.Fragment>
         <div>
            <select value={selected} onChange={handleChange}>
                <option value="markJ">Mark J.</option>
                <option value="maryA">Marry A.</option>
                <option value="peterM">Peter M</option>
            </select>
         </div>
         {selected === 'maryA' && <div id="showThisDiv">
            <input type="text" placeholder="age" />
         </div>}
      </React.Fragment>

  );
};
export default Student

Если вам нужно выбрать множественный , вы можете использовать следующий код:

  const Student = ({key}) = > {
  const [selected, setSelected] = useState()

  const handleChange = (event) => {
     const newSelectedOptions = [...event.target.options].filter(o => o.selected).map(o => o.value);
     setSelected(newSelectedOptions)
  }

  return (
      <React.Fragment>
         <div>
            <select value={selected} onChange={handleChange} multiple>
                <option value="markJ">Mark J.</option>
                <option value="maryA">Marry A.</option>
                <option value="peterM">Peter M</option>
            </select>
         </div>
         {selected.includes("maryA") && <div id="showThisDiv">
            <input type="text" placeholder="age" />
         </div>}
      </React.Fragment>

  );
};
export default Student