Réagir dropdown ne pas définir l'état

Question

J'ai un composant parent qui contrôle tout état et un composant enfant qui retourne un menu déroulant et passe (est censé passer, plutôt) le résultat de cliquer sur une option jusqu'au composant parent et mettre à jour le l'état des parents.

Parent:

// We're controlling all of our state here and using children 
// components only to return lists and handle AJAX calls. 

import React, { Component } from 'react'; 
import SubList from './SubList'; 
import StopList from './StopList'; 

class SubCheck extends Component { 

    constructor (props) { 
    super(props); 
    this.state = { 
     selectedSub: null, 
     selectedStop: null, 
     stops: [], 
    }; 
    this.handleSubSelect.bind(this); 
    this.handleStopSelect.bind(this); 
    } 

    // We want the user to be able to select their specific subway 
    // stop, so obviously a different array of stops needs to be 
    // loaded for each subway. We're getting those from utils/stops.json. 
    handleSubSelect(event) { 
     var stopData = require('../utils/stops'); 
     var stopsArray = []; 
     for (var i = 0; i < stopData.length; i++) { 
      var stop = stopData[i]; 

      if (stop.stop_id.charAt(0) == event.target.onSubSelect) { 
       stopsArray.push(stop.stop_name); 
      } 
     } 
     this.setState(() => { 
      console.log('setting state'); 
      return { 
       selectedSub: event.target.onSubSelect, 
       stops: stopsArray 
      } 
     }); 
    } 

    handleStopSelect(event) { 
     this.setState({selectedStop: event.target.onStopSelect}); 
    } 

    render() { 
     return (
      <div> 
       <SubList onSubSelect={this.handleSubSelect.bind(this)}/> 
       <StopList stops={this.state.stops} onStopSelect={this.handleStopSelect.bind(this)}/> 
      </div> 
     ); 
    } 
} 

export default SubCheck; 

enfant:

import React from 'react'; 
import PropTypes from 'prop-types'; 

function SubList (props) { 
    const subways = ['', '1', '2', '3', '4', '5', '6', 
    'S', 'C', 'B', 'D', 'N', 'Q', 'R', 'L'] 
    return (
     <select> 
      { 
       subways.map(subway => 
        <option key={subway} onClick={() => props.onSubSelect(subway)}> 
         {subway} 
        </option> 
       ) 
      } 
     </select> 
    ) 
} 
SubList.PropTypes = { 
    onSubSelect: React.PropTypes.func.isRequired 
}; 

export default SubList; 

Quand j'ouvre l'application comme il est et choisissez une option dans le menu déroulant, deux choses ne se produisent pas que j'attendre à passer . Le premier est que le second menu (celui retourné par StopList, dont le code n'est pas inclus ici) n'est pas rempli avec des données. La deuxième chose est que 'setting state' n'est pas connecté à la console. Cette deuxième chose me porte à croire que quelque part dans mon code, je ne passe pas correctement l'option cliquée dans la liste déroulante jusqu'à ma méthode handleSubSelect et donc ne pas correctement définir un nouvel état.

Answer 1

Vous devez utiliser le gestionnaire onChange sur la élément select:

<select onChange={props.onSubSelect}> 

Votre gestionnaire onSubSelect recevra un événement, et vous aurez besoin pour obtenir la valeur sélectionnée à partir event.target.value.

Voir docs:

https://facebook.github.io/react/docs/forms.html#the-select-tag

Answer 2

Vous avez déjà fait la liaison, de sorte que vous n'avez pas besoin que, en fait, lorsque l'utilisateur modifie la sélection tout ce que vous faites est en train de faire la liaison

changer donc cette ligne

<SubList onSubSelect={this.handleSubSelect.bind(this)}/> 

à ce

<SubList onSubSelect={this.handleSubSelect}/> 

et le monde devrait être plus heureux.

Vous avez le même problème avec onStopSelect

MISE À JOUR

dans la méthode handleSubSelect() vous faites ceci: Je pense que

this.setState(() => { 
     console.log('setting state'); 
     return { 
      selectedSub: event.target.onSubSelect, 
      stops: stopsArray 
     } 
    }); 

Ce qui ressemble un peu foiré, il devrait être présent :

console.log('setting state'); 
    this.setState({ 
      selectedSub: event.target.onSubSelect, 
      stops: stopsArray 
     } 
    ); 

Answer 3

Vous devriez être obligatoire les méthodes comme:

this.handleStopSelect = this.handleStopSelect.bind(this); 

que sur here. Bien sûr changer l'élément comme suit:

<SubList onSubSelect={this.handleSubSelect}/> 

également au lieu de event.target.onSubSelect Pouvez-vous essayer event.target.value