Как сделать отключенную опцию в select как заполнитель

Question

Я попробовал решение ниже, теоретически оно работает, но реакция возвращает это: Предупреждение: используйте реквизиты defaultValue или value вместо установки selected вкл.

<Select>
   <OptionPlaceholder selected disabled>
         Escolha uma opção...
   </OptionPlaceholder>
</Select>

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

Answer 1

Вы хотите установить атрибут value или defaultValue select в React вместо selected реквизита option!

Вот пример с value атрибут:

import React, { Component } from 'react'

// ...

export default class App extends Component {
  state = {
    value: '',
  }

  handleChange = event => {
    const { value } = event.target

    this.setState({ value })
  }

  render () {
    const { value } = this.state

    return (
      <Select value={value} onChange={this.handleChange}>
        <OptionPlaceholder disabled>
          Escolha uma opção...
        </OptionPlaceholder>
      </Select>
    )
  }
}

Или посмотрите здесь

Answer 2

Это просто ссылочный код, потому что вам нужно добавить опцию как defaultValue и обрабатывать ее во время проверки, если она выбрана или нет. Или используйте обработчики onChange для изменения переменной состояния:

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: '1'
        };
    }

    render(){
       return(
           <select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
              <option value='1' disabled>Select</option>
              {
                  [2,3,4].map((i,j)=>{
                      return <option key={i} value={i}>{i}</option>
                  })
              }
           </select>
       );
    }
}

Answer 3

вы пропустили props

<option value="" disabled={this.props.defaultDisabled}>