使用 geocomplete 反应 LinkedStateMixin

Question

目前使用带有 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')} />;
  }
}); 

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

Answer 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} />;
  }
});