Update Wählen Sie reagieren aus einer anderen Option wählen

Question

Ich versuche, meine Stadt zu aktualisieren aus dem ausgewählten Zustand wählen, aber die Stadt nicht aktualisiert, wenn ich den Zustand zu ändern:

Hier ist der Teil meines Render-Code:

<div> 
    <label for="state">state:</label> 
      <SelectInput items="RO-DF-RS-SP-RJ-MG-PR" onChange={this.handleChange} name="state"/> 
       </div> 
       {!!this.state.stt && 
        (
         <div> 
          <label for="city">city:</label> 
          <SelectInput url="/static/json/" filename={this.state.stt} onChange={this.props.onChange} name="city"/> 
         </div> 
        ) 
       } 
<div> 

this.props.onChange ist nur ein Handler den Wert des Eingangs zu erhalten, die Daten auf Datenbank speichern

und der Code:

handleChange(event){ 
    if(event.target.name == "state"){ 
     this.setState({ 
      stt: event.target.value 
     }); 
    } 
    if(this.props.onChange) { 
     this.props.onChange(event); 
    } 
} 

setzt die korrekte Zustand (this.state.stt)

Hier ist meine SelectInput:

class SelectInput extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { 
      select: "", 
      items: [], 
      filename: this.props.filename 
     } 
     this.handleChange = this.handleChange.bind(this) 


    } 

    componentDidMount(){ 
     if(this.props.filename){ 
      console.log(this.props.filename); 
     } 

     if(this.props.items){ 
      this.setState({ 
       items: this.props.items.split("-") 
      }) 
     } 
     else if(this.props.url && this.props.filename){ 
      $.ajax({ 
       type: 'GET', 
       url: `${this.props.url}${this.props.filename}.json`, 
       headers: { 'Authorization': "Token " + localStorage.token }, 
       success: (result) => { 
        this.setState({ 
         items: result.child 
        }) 
       }, 
       error: function (cb) { console.log(cb) } 
      }); 
     } 
    } 

    handleChange(event){ 
     this.setState({ 
      select: event.target.value 
     }); 
     if(this.props.onChange) { 
      this.props.onChange(event) 
     } 
    } 

    render(){ 
     return (
      <select name={this.props.name} value={this.state.select} onChange={this.handleChange}> 
       <option value=""></option> 
       {this.state.items && this.state.items.map(item => 
        <option value={item}>{item}</option> 
       )} 

      </select> 
     ) 
    } 


} 

export default SelectInput 

Jede Idee, mein Problem zu lösen?

Answer 1

Da Sie filename dynamisch festlegen, müssen Sie componentWillReceiveProps implementieren, die Ajax-Anforderung zum Laden neuer Datei machen wird.

componentWillReceiveProps({ filename }) { 
    if(filename !== this.props.filename) { 
    this.loadItems(filename) 
    } 
} 

loadItems(filename) { 
    $.ajax({ 
     type: 'GET', 
     url: `${this.props.url}${filename}.json`, 
     headers: { 
     'Authorization': "Token " + localStorage.token 
     }, 
     success: (result) => { 
     this.setState({ 
      items: result.child 
     }) 
     }, 
     error: function(cb) { 
     console.log(cb) 
     } 
    }); 
}