0
votes

Comment faire une option désactivée dans une sélection, comme espace réservé

J'ai essayé la solution ci-dessous, en théorie cela fonctionne, mais react renvoie ceci: Attention: utilisez les accessoires defaultValue ou value au lieu de définir selected activé.

<Select>
   <OptionPlaceholder selected disabled>
         Escolha uma opÃ§Ã£o...
   </OptionPlaceholder>
</Select>

  Le but est uniquement de supprimer cet avertissement, mais toute autre solution que j'ai essayée ne me donne pas le résultat attendu

javascript reactjs html css html-select

1 commentaires

Copie possible de Option de sélection conditionnellement désactivée dans React

3 Réponses :

0
votes

vous avez manqué un props

0 commentaires

0
votes

Vous souhaitez définir l'attribut value ou defaultValue du select dans React au lieu de l'accessoire selected de l'option !

Voici un exemple avec l'attribut 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>
    )
  }
}

Ou jetez un œil ici

0 commentaires

0
votes

C'est juste le code de référence, car vous devez ajouter une option comme defaultValue et la gérer lors de votre validation si elle est sélectionnée ou non. Ou utilisez les gestionnaires onChange pour modifier une variable d'état:

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>
       );
    }
}

0 commentaires