Блог

Главная - Вопросы по программированию - onSelect не запускается для выпадающего списка Реагировать

onSelect не запускается для выпадающего списка Реагировать

#node.js #reactjs

Вопрос:

Я очень новичок в реагировании, поэтому я все еще многому учусь. Независимо от того, что я делаю, выбор, похоже, просто не работает. Я создал простую функцию, которую она должна вызывать. Вы можете сказать, что он был вызван через консоль.войдите, но в браузере, когда я смотрю на консоль, она просто ничего не делает.

Вот код для выпадающего списка:

 import React,{useState} from 'react';
import SEPractices from "../dummydata/SEPractices"

const optionItems = SEPractices.map((SEPractice) =>
  <option key={SEPractice.practice}>{SEPractice.practice}</option>
);
const Dropdown = () => {

  const handleSelect=(e)=>{
    console.log("Inside");
  }

  return (
    <div>
       <select onSelect={handleSelect}>  
          <option Default hidden>
            Select an SE Practice
          </option>
          {optionItems}
       </select>
    </div>
  )
}
export default Dropdown;

Ответ №1:

Попробуйте использовать onChange 

 <select value={selectValue} onChange={handleSelect}>
    <option Default hidden>
       Select an SE Practice
    </option>
    {optionItems}
</select>

И обработайте выбор таким образом:

 const [selectValue, setValue] = useState("")

cosnt handleSelect = (e) => {
    setValue(e.target.value);
}

Комментарии:

1. Большое вам спасибо за ваш ответ! Однако, когда я меняю метод handleSelect на созданный вами, он выдает мне несколько ошибок. Он выделяет первую { , а также запятую в конце метода и говорит: ';' expected

2. Отредактировано сейчас, моя плохая

Ответ №2:

 <select value={selectValue} onChange={handleSelect}>
    <option value="dummyData">
       Select an SE Practice
    </option>
    {optionItems}
</select>

и не используйте значения по умолчанию и скрыто, React позаботится о значении по умолчанию, зачем указывать value={selectValue} в элементе.

Кроме того, нам нужно передать значение в <option> , оно будет отслеживаться на основе значения.

Метки: