获取 react-geosuggest 输入字段的输入值 [英] Get input value of react-geosuggest input field
本文介绍了获取 react-geosuggest 输入字段的输入值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 react-geosuggest
并且由于某种原因,当我提交表单时没有收集 Geosuggest
输入字段的值.Geosuggest
输入字段在输入字段中包含 name=
的方式与我的其他输入字段相同,但该值始终返回为空.任何建议.
I'm using react-geosuggest
and for some reason, the value of the Geosuggest
input field doesn't get collected when I submit the form. The Geosuggest
input field contains the name=
in the input field same way my other input fields do yet the value always comes back empty. Any suggestions.
export default class ContactDetails extends React.Component {
constructor(props) {
super(props);
this.state = {
'name.first': '',
'address.fullAddress': '',
};
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit(event) {
event.preventDefault();
var data = {
'name.first': this.state['name.first'],
'address.fullAddress': this.state['address.fullAddress'],
};
console.log("data: ", data);
}
render() {
return (
<form onSubmit={this.handleSubmit} noValidate>
<Geosuggest
name="address.fullAddress"
placeholder="Full address"
value={this.state['address.fullAddress']}
onChange={this.handleInputChange}
initialValue={this.state['address.fullAddress']}
location={new google.maps.LatLng(25.2744, 133.7751)}
radius="0"
/>
<input
name="name.first"
type="text"
value={this.state['name.first']}
onChange={this.handleInputChange}
className={this.state.errors['name.first'] ? "validate invalid" : "validate" }
/>
<button className="btn waves-effect waves-light" type="submit" name="action">
Save
</button>
</form>
)
}
}
推荐答案
react-geosuggest
组件使用输入值而不是事件值调用其 onChange
处理程序目的.因此,我建议您为它编写一个单独的处理程序,如下所示:
The react-geosuggest
component calls its onChange
handler with the value of the input rather that the event object. Thus I recommend you write a separate handler for it like this:
handleGeosuggestChange(value) {
this.setState({ 'address.fullAddress': value });
}
并在组件中使用它:
<Geosuggest
...
onChange={this.handleGeosuggestChange}
...
/>
这篇关于获取 react-geosuggest 输入字段的输入值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文