Хобрук: Ваш путь к мастерству в программировании

Как использовать defaultValue в теге select в функциональном компоненте?

У меня есть функциональный компонент, который содержит тег select с несколькими параметрами.
Я хочу установить автомобили в качестве значения по умолчанию.
Сначала я просто добавил выбранный в параметр автомобиля, но реакция выдала мне предупреждение о том, что вместо этого я должен использовать defaultValue в теге выбора. Мне было интересно, как я могу это сделать?

Заранее спасибо.

function ChooseOptions(props) {
  return (
    <div>
      <h2>Choose Options</h2>
      <label>
        New Only <input type="checkbox" />
      </label>

      <label
        htmlFor="selectType"
        style={{ display: "block" }}
        defaultValue="Cars"
      >
        Select Type
        <select id="selectType">
          <option value="all">All</option>
          <option value="cars">Cars</option>
          <option value="trucks">Trucks</option>
          <option value="convertibles">Convertibles</option>
        </select>
      </label>
    </div>
  );
}

Ответы:


1

Попробуй это.

Вы получите значение изменения в свойствах onChange,

Вы можете установить значение, передав реквизит «значение»

  <select id="selectType" defaultValue="cars">
            <option value="all">All</option>
            <option value="cars">Cars</option>
            <option value="trucks">Trucks</option>
            <option value="convertibles">Convertibles</option>
        </select>
06.06.2020
Новые материалы

Создание кнопочного меню с использованием HTML, CSS и JavaScript
Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..

Внедрите OAuth в свои веб-приложения для повышения безопасности
OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..

Классы в JavaScript
class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..

Как свинг-трейдеры могут использовать ИИ для больших выигрышей
По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..

Как построить любой стол
Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...

Обзор: Машинное обучение: классификация
Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..

Разработка расширений Qlik Sense с qExt
Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..