Передача значения от дочернего к родительскому без onChange response

Question

Я использую компонент для ввода Input Select Select SelectInput.

Вот мой код:

'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> 
     ) 
    } 
} 

Моя проблема в том, когда мой выбор есть только один вариант, я отключить выбрать и вставить значение по умолчанию. Но я не получаю значение события onChange для передачи родительскому компоненту.

Как это сделать?

Заранее спасибо

Answer 1

Я предполагаю, что если вы хотите вызвать метод handleChange даже один элемент к тому, состоянию уточненного и/или вызова обработчика onChange принятого реквизитом.

В какой-то момент ваш state.items должны быть заполнены:

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); 
    } 
} 

Я удалил selected переменную и атрибут defaultValue в методе render:

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> 
    ) 
}