Question

我使用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>
    )
  }
}

Answer 1

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

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

并在组件中使用它：

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

Answer 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！

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

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

2 个答案: