React dropdown nicht set status

Question

Ich habe eine übergeordnete Komponente, die alle Status steuert und eine untergeordnete Komponente, die ein Dropdown-Menü zurückgibt und das Ergebnis des Klickens einer Option an die übergeordnete Komponente übergeben und aktualisieren soll Elternstatus

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; 

Kind:

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; 

Wenn ich die app öffnen, wie und eine Option aus dem Dropdown-Menü auswählen, passieren zwei Dinge nicht, dass ich würde erwarten, geschehen . Einer davon ist, dass das zweite Menü (das von StopList zurückgegebene, dessen Code hier nicht enthalten ist) nicht mit Daten gefüllt ist. Die zweite Sache ist, dass "Einstellungsstatus" nicht in der Konsole protokolliert wird. Diese zweite Sache führt mich zu der Annahme, dass ich irgendwo in meinem Code die im Dropdown-Menü angeklickte Option nicht korrekt an meine handleSubSelect-Methode übergebe und daher keinen neuen Zustand richtig einstelle.

Answer 1

Sie müssen die onChange Handler auf die verwenden select-Element:

<select onChange={props.onSubSelect}> 

Ihre onSubSelect Handler ein Ereignis empfangen, und Sie werden den ausgewählten Wert von event.target.value erhalten müssen.

Siehe docs:

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

Answer 2

Sie haben bereits die bind getan haben, so dass Sie in der Tat, dass nicht brauchen, wenn der Benutzer die Auswahl ändert sich alles, was Sie tun, um die bind tut

So ändern Sie diese Zeile

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

Dazu

<SubList onSubSelect={this.handleSubSelect}/> 

und die Welt sollte glücklicher sein.

Sie haben das gleiche Problem mit onStopSelect

UPDATE

im handleSubSelect() Methode, die Sie dies tun:

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

die ein bisschen versaut aussieht, ich denke, es das sein sollte :

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

Answer 3

Sie sollten die Methoden als verbindlich:

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

als auf here. Natürlich das Element wie folgt zu ändern:

<SubList onSubSelect={this.handleSubSelect}/> 

auch statt event.target.onSubSelect Können Sie versuchen event.target.value