沒有onChange，從孩子傳遞給父母的值反應

我正在使用組件來執行名爲SelectInput的Select輸入。沒有onChange，從孩子傳遞給父母的值反應

這裏是我的代碼：

'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事件的值傳遞給父組件。

我該怎麼做？

在此先感謝

來源

2016-07-29 Alessander França

如果禁用元素？爲什麼除了變化事件？以及爲什麼你禁用該元素？爲什麼用戶會與禁用的元素進行交互？ –

我禁用了該元素，因爲該組件只有一個客戶端，並且此組件知道此客戶端。我也有一份國家名單，但是現在我只有一個國家。那麼爲什麼我會啓用選擇？如果我有兩個或多個元素並將默認值設置爲列表的第一個元素，如果我沒有更改該選擇，如何將此元素傳遞給父組件？ –

在這種情況下，如果沒有項目是1，則可以在渲染自己時調用'handleChange（）'。因爲用戶無法與元素進行交互。 –

我認爲如果你想調用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> 
    ) 
}

來源

2016-07-29 19:04:24

偉大的一點;）這是我一直在尋找的東西 –

沒有onChange，從孩子傳遞給父母的值反應

回答

相關問題