没有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，从孩子传递给父母的值反应

回答

相关问题