获取 react-geosuggest 输入字段的输入值 [英] Get input value of react-geosuggest input field

问题描述

我正在使用 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屋！