[英]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.