首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >reactjs中的选择框不起作用

reactjs中的选择框不起作用
EN

Stack Overflow用户
提问于 2016-12-25 17:29:21
回答 1查看 1.3K关注 0票数 1

我有一个带有选择框的表单,它从服务器获取数据并将其发布到相同的服务器。我使用的是来自ant design的选择框。

但是处理更改的那部分handleChange()不工作,并给我这个错误:

无法读取未定义的属性“value”

这是我的代码:

代码语言:javascript
复制
let optionData = [];

class ContentCountries extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: 'Select',
      jsonData: 0
    };
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  handleSubmit(event) {
    event.preventDefault();
    var data = {
      name: this.state.value
    }
   console.log(data);
    /*$.ajax({
      type: 'POST',
      url: 'https://google.com',
      data: data
    })*/
  }
  componentDidMount(){
    //ajax request
    /*$.ajax({
      type: 'GET',
      url: 'https://google.com',
      succes: function(data){
        optionData = data;
      }
    })*/
    //static example
    optionData.push('Bangalore');
    optionData.push('Pune');
    this.setState({jsonData: 1});//change the status so the select tag will get the new values(render will happen)
  }
  render() {
    var optionsTag = <Option value="">Select City</Option>  
   if(optionData.length){
     optionsTag = optionData.map((data,index) => {
                          return <Option value={data} key={index}>{data}</Option>
                          })
   }

    return (
   <form onSubmit={false}>
        <label>
          Please select city:
          <Select value={this.state.value} onChange={this.handleChange.bind(this)}>
            { optionsTag}
          </Select>
        </label>
        <input type="button" onClick={this.handleSubmit.bind(this)} value="Submit" />
      </form>
    )
  }
}
EN

回答 1

Stack Overflow用户

发布于 2016-12-25 17:42:31

编辑:对不起,就像你说的,它是Ant Design。但是,它与您的handleChange函数几乎相同。因为它将值作为参数,而不是事件。以便在传递的参数中没有target属性。

代码语言:javascript
复制
handleChange(val) {
    this.setState({value: val});
  }

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/41320008

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档