簡體   English   中英

reactjs中的選擇框不起作用

[英]select box in reactjs not working

我有一個帶有選擇框的表單,該選擇框從服務器獲取數據並將其發布到同一服務器。 我正在使用螞蟻設計中的選擇框。

但是處理更改的部分handleChange()無法正常工作,並給我這個錯誤:

無法讀取未定義的屬性“值”


這是我的代碼:

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

編輯:很抱歉,正如您所說,它是Ant Design 但是,它與handleChange函數幾乎相同。 因為它將值作為參數,而不是事件。 因此,傳遞的參數內沒有target屬性。

 handleChange(val) { this.setState({value: val}); } 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM