Bonjour, j'ai ce composant sélectionné

<select
    value={(this.state.selectedVersion)}
    disabled={(this.state.versionDisable)}
    onChange={this.handleVersionChange}
>
    <option disabled hidden>Välj version</option>
    {
        this.state.versions.map((object, i) => {
            return (
                <option key={i} value={object}>
                    {object.text}{object.lastModified}
                </option>
            )
        })
    }
</select>

Ici, je veux que l'événement onChange prenne la valeur d'options que j'ai enregistrée est la chose que je veux et l'utilise comme valeur mais quand je l'envoie à mon gestionnaire onChange

handleVersionChange(event){
    console.log(event);
    this.setState({selectedVersion: event.target.value});
    console.log(this.state.selectedVersion);
}

Le premier console.log qui enregistre l'événement qui a été envoyé, j'obtiens un objet proxy dont je ne sais pas de quoi il s'agit ou d'où il vient. Je ne sais pas si j'obtiens ce problème car je crée les options avec la carte. Quelqu'un sait ce que je fais mal?

1
novafluff 13 avril 2018 à 14:57

4 réponses

Meilleure réponse

Je pense toujours que le problème est de définir l'attribut value sur l'élément option en tant qu'objet. Pensez à utiliser une chaîne à la place. Vous pouvez toujours inverser la recherche d'une valeur dans votre gestionnaire de modifications à partir du tableau d'origine pour obtenir l'objet complet.

Dans l'exemple suivant, j'utilise un attribut que j'ai créé appelé id à utiliser comme valeur d'option de sélection. Cette valeur peut être n'importe quel identifiant unique dans votre objet qui est un type simple comme une chaîne ou un nombre. La même valeur peut être utilisée pour inverser la recherche de l'objet complet

Échantillon JS Fiddle

class SelectApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", id: 1 },
        { text: "Learn React", id: 2 },
        { text: "Play around in JSFiddle", id: 3 },
        { text: "Build something awesome", id: 4 }
      ]
    }
    selected:null
  }
  
  handleChange = (e)=>{
    // Get the selected value which is a string
  	var selectedId = e.target.value;
    console.log(selectedId);
    // Reverse look up on the array to find the full object
    var selected = this.state.items.find((d)=>(d.id==selectedId));
    console.log(selected);
    // Update state with object
    this.setState({selected});
  }
  
  render() {
    return (
      <div>
        <select onChange={this.handleChange}>
        <option disabled selected>Select</option>
        {this.state.items.map((item, i) => (
        	<option key={i} value={item.id}>{item.text}</option>
        ))}
        </select>
      </div>
    )
  }
}

ReactDOM.render(<SelectApp />, document.querySelector("#app"))
1
Chirag Ravindra 13 avril 2018 à 12:52

Votre handleVersionChange doit être une fonction d'écoute. Remplacer par ceci:

 handleVersionChange = (event) => {
     console.log(event);
     this.setState({selectedVersion: event.target.value});
     console.log(this.state.selectedVersion);
 }

Ou dans votre constructor ajoutez:

this.handleVersionChange = this.handleVersionChange.bind(this)
0
LaPoule 13 avril 2018 à 12:06

Pourquoi mettez-vous une autre paire d'appareils orthopédiques à l'intérieur des appareils bouclés: {(this.state.selectedVersion)}? Suis-je en train de manquer quelque chose: {this.state.selectedVersion}?

0
Elkhan Mamedov 13 avril 2018 à 12:33

Essayez de vous connecter à la console dans componentWillReceiveProps au lieu de l'intérieur de votre fonction de changement de poignée.

SetState est asynchrone.

0
William Chou 13 avril 2018 à 12:58