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

IT技术 reactjs meteor
2021-05-22 21:29:45

我正在使用react-geosuggest,出于某种原因,Geosuggest当我提交表单时输入字段的值不会被收集。Geosuggest输入字段包含name=在输入字段的方式我的其他输入字段做但value总是空空的回来一样。有什么建议。

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>
    )
  }
}
2个回答

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

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

并在组件中使用它:

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

我遇到了这个问题,并觉得这需要在第一个答案中留下的评论的基础上进行一些详细说明才能清楚。

需要传递到<geosuggest />Component的正确 proponSuggestSelect()为了捕获所选建议的值,而不是输入到字段中的值。

您需要创建一个方法来处理要存储在状态中的地址标签值,并且您需要在构造函数中绑定此方法,如下所示,为简单起见,我正在调用该方法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!

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