Question

我正在使用一个组件来做Select Select输入。

这是我的代码：

'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上获取event的值来传递给父组件。

我该怎么做？

提前致谢

Answer 1

我假设如果你想要调用handleChange方法，即使有一个项目是让状态保持最新状态或/并且调用由props传递的处理程序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>
    )
}

将值从子级传递给父级而不进行onChange响应

1 个答案: