Übergeben Sie Wert von Kind zu Eltern ohne OnChange reagieren

Question

Ich verwende eine Komponente, um die Eingabe von Select SelectInput durchzuführen.

Hier ist mein Code:

'use strict' 
import React from 'react' 

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

    . 
    . 
    . 

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

    render(){ 
     let disabled = this.state.items.length > 1 ? false : true, 
      selected = this.state.items ? this.state.items[0] : "" 
     return (
      <select name={this.props.name} disabled={disabled} defaultValue={selected} value={this.state.select} onChange={this.handleChange}> 
       {this.state.items && this.state.items.map(item => 
        <option value={item} >{item}</option> 
       )} 

      </select> 
     ) 
    } 
} 

Mein Problem ist, wenn mein select nur eine Option hat, wie ich die Auswahl deaktivieren und den Wert als Standard ein. Aber ich bekomme nicht den Wert des Ereignisses bei onChange, um an die Elternkomponente zu übergeben.

Wie mache ich das?

Vielen Dank im Voraus

Answer 1

Ich gehe davon aus, dass, wenn Sie die handleChange Methode sogar mit einem Punkt nennen wollen, ist von Requisiten einen Zustand up-to-date oder/und rief den Handler onChange übergeben zu haben.

An einem gewissen Punkt Ihre state.items müssen gefüllt werden:

componentWillMount(){ 
    // load data (ajax or hard-coded) 
    let items = ['toto']; 
    let select = items.length ? items[0] : ''; 
    this.setState({ 
    items, 
    select 
    }); 
    if(this.props.onChange) { 
    this.props.onChange(select); 
    } 
} 

ich die selected Variable und das defaultValue Attribut in der render Verfahren entfernt:

render(){ 
    let disabled = this.state.items.length > 1 ? false : true; 

    return (
     <select name={this.props.name} disabled={disabled} value={this.state.select} onChange={this.handleChange}> 
     {this.state.items && this.state.items.map((item, i) => 
      <option key={i} value={item} >{item}</option> 
     )} 
     </select> 
    ) 
}