获取 react-geosuggest 输入字段的输入值答案

【问题标题】：Get input value of react-geosuggest input field获取 react-geosuggest 输入字段的输入值
【发布时间】：2019-01-05 04:01:32
【问题描述】：

我正在使用react-geosuggest，由于某种原因，当我提交表单时，没有收集到Geosuggest 输入字段的值。 Geosuggest 输入字段在输入字段中包含 name=，就像我的其他输入字段一样，但值总是返回为空。任何建议。

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

【问题讨论】：

标签： reactjs meteor

【解决方案1】：

react-geosuggest 组件使用输入值而不是事件对象调用其onChange 处理程序。因此，我建议您为它编写一个单独的处理程序，如下所示：

handleGeosuggestChange(value) {
  this.setState({ 'address.fullAddress': value });
}

并在组件中使用它：

<Geosuggest
    ...
    onChange={this.handleGeosuggestChange}
    ...
/>

【讨论】：

好的，现在我得到了输入但未选择的值。例如，如果我正在寻找100 Sample Street 并输入100 S，然后选择谷歌建议100 Sample Street，则记录的值仅为100 S。
谢谢。解决方案是使用：onSuggestSelect(suggest) { console.log("suggest: ", suggest); // eslint-disable-line this.setState({'address.fullAddress': suggest.label}) }

【解决方案2】：

我遇到了这个问题，并认为这需要在第一个答案中留下的评论的基础上进行一些详细说明。

需要传递到<geosuggest /> 组件的正确道具是onSuggestSelect()，以便捕获所选建议的值，而不是输入到字段中的值。

您需要创建一个方法来处理您想要存储在状态中的地址标签值，并且您需要在构造函数中绑定此方法，如下所示，为简单起见，我调用方法selectSuggestion()：

constructor(props) {
  super(props);
  this.state = {
    address: ""
  }

  this.selectSuggestion = this.selectSuggestion.bind(this);
}

selectSuggestion() 很棘手，因为当用户想要删除初始条目以重新启动时，您需要考虑边缘情况。当用户删除第一个字母时，您可能会无意中将属性的状态设置为null，这会导致您的应用程序崩溃。您应该按照以下方式处理这种情况：

selectSuggestion(suggestion) {
  try {
    this.setState({
      address: "suggestion.label"
    });
  } catch (e) {
    this.setState({
      address: ""
    });
  }
}

一旦上述建立，那么你可以继续使用react-geosuggest组件：

<Geosuggest placeholder="Enter Address!"
  ref={ el => this._geoSuggest = el }
  onSuggestSelect={ this.selectSuggestion }
/>

不要忘记添加文档中提到的 CSS！

这就是我所做的，希望对某人有所帮助。

【讨论】：