使用 geocomplete 反应 LinkedStateMixin

Posted 2023-02-23

【中文标题】使用 geocomplete 反应 LinkedStateMixin

【英文标题】：React LinkedStateMixin with geocomplete

【发布时间】：2015-11-25 07:47:36

【问题描述】：

目前使用带有 react-rails gem 和 geocomplete gem 的 Rails 4。

在我将前端更改为使用 Reactjs 之前，一切正常（ish）。当我输入几个字符时，会显示自动完成列表。我选择了位置，但我的州只显示了几个字符。示例：当我键入“bir”时，会显示“Birmingham”的列表。如果我选择“英国伯明翰”，则只存储“bir”，为什么？

js.jsx：

var NewProject = React.createClass(
  mixins: [React.addons.LinkedStateMixin],

  getInitialState: function() 
    return 
      location: this.props.data.location
    
  ,

  render: function()
    $("#location").geocomplete( details: "form" );
    return <input type="text" id="location" valueLink=this.linkState('location') />;
  
); 

无论我输入几个字符，如何在选择时获取字符串的完整值？

【参考方案1】：

问题是 geocomplete 对输入做了一些魔法，这与 React 观察字段修改的方式不符。我会尝试使用其他解决方案进行自动完成，但如果您需要坚持使用 geocomplete，您可以尝试使用 jquery + 普通的 onChange 方法来检测字段中的更改。像这样的：

var NewProject = React.createClass(

  getInitialState: function() 
    return 
      location: this.props.data.location
    
  ,
  
  onGeoChange: function(e) 
    this.setState(
      location:  $("#location").val()
    );
  ,

  render: function()
    $("#location").geocomplete( details: "form" );
    return <input type="text" id="location" onChange=this.onGeoChange />;
  
);

【讨论】：

似乎不起作用。基本上我需要废弃geocomplete？

这将是最简单的解决方案。您可以使用专为 React 设计的 GeoSuggest（也来自 ubilabs）：github.com/ubilabs/react-geosuggest