Не удается выбрать значение по умолчанию в <select>обработчиках событий React

Question

Итак, я не знаю, является ли это ошибкой или я сделал что-то не так, но когда я пытаюсь отправить значение по умолчанию , браузер не предупреждает значение , которое это «реагировать». Он просто предупреждает о пустой строке. Вот код:

import React, { Component } from 'react'
class Form extends Component {

constructor(props) {
    super(props)

    this.state = {
         topic:'',
    }
}

handleTopicChange = event => {
    this.setState({topic: event.target.value,})}

handleSubmit = event => {
    alert(`${this.state.topic}`)
}

render() {
    return (
        <form onSubmit={this.handleSubmit}>
        <div>
            <label>Topic</label>
            <select value={this.state.topic} onChange={this.handleTopicChange}>
                <option value="react">React</option>
                <option value="vue">Vue</option>
                <option value="angular">Angular</option>
            </select>
        </div>
        <button type="submit">Submit</button>
        </form>
    )
}} export default Form

Answer 1

Измените this.state = { topic: '' } на this.state = { topic: 'react' }, чтобы весь код был:

import React, { Component } from 'react'
class Form extends Component {

constructor(props) {
   super(props)

   this.state =  {
        topic: 'react',
   }
}


handleTopicChange = event => {
   this.setState({topic: event.target.value,})}

handleSubmit = event => {
   alert(`${this.state.topic}`)
}

render() {
   return (
       <form onSubmit={this.handleSubmit}>
       <div>
           <label>Topic</label>
           <select value={this.state.topic} onChange={this.handleTopicChange}>
               <option value="react">React</option>
               <option value="vue">Vue</option>
               <option value="angular">Angular</option>
           </select>
       </div>
       <button type="submit">Submit</button>
       </form>
   )
}} 
export default Form

Answer 2

Я согласен с тем, что это раздражает, и то, как работают поля выбора, похоже на то, что по умолчанию значение всегда пусто "", и вы хотите, чтобы ваши пользователи выбирали значение.

НО, если бы мне пришлось это сделать это, я думаю, самый чистый способ - использовать React useState и инкапсулировать компонент.

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

export default function App() {
  const [selection, setSelection] = useState("React");  // set default value here
  
  const handleSelection = (e) => {
    const selectionValue = e.target.value
    console.log(selectionValue);
    setSelection(selectionValue); // set current state
  };

  return (
    <div className="App">
      {/* show current state in below div */}
      <h1>Selected Topic: {selection}</h1>
      <select onChange={handleSelection} defaultValue="React">
        <option value="React">React</option>
        <option value="Vue">Vue</option>
        <option value="Angular">Angular</option>
      </select>
    </div>
  );
}

Answer 3

Я думаю, что это нормальное поведение, потому что вы устанавливаете значение по умолчанию пустым, но вы не указываете тег <option value="" /> с пустым значением, что означает, что браузер выберет 1-й элемент в качестве выбранного элемента. Чтобы было понятнее, вы должны добавить этот пустой параметр, который еще не выбран:

<option value="react">React</option>
<option value="vue">Vue</option>
<option value="angular">Angular</option>
<option value="">---</option>

Тогда браузер выберет пустой вариант --- по умолчанию.