为什么 React.js 不适用于 Twitter 的 Typeahead 库

我正在为我的应用程序使用React，并且我注意到当我尝试使用内部React组件时，Twitter Typeahead库不起作用。我知道那里还有很多其他React自动完成库，但是我想知道为什么当React与JQuery和其他多个库搭配使用时，它与Twitter的打字机不起作用

更新：

作为一个例子，我使用了FB Avatar示例代码并尝试使用Typeahead。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <div>
      <div id="bloodhound">
      <input class="typeahead" type="text" placeholder="States of US"/>
    </div>
    </div>
  </body>
     <script type="text/jsx">

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
    // constructs the suggestion engine
var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: states
});

$('#bloodhound .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: states
});

var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
        <div id="bloodhound">
        <div><input className="typeahead" type="text" placeholder="States of US"/></div>
        </div>
      </div>
    );
  }
});
var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});
var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'https://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});
React.render(
  <Avatar username="sports" />,
  document.getElementById('example')
);
    </script>
</html>

在组件之外的框在组件之外工作，但在反应组件中呈现时盒子不是相同的框。我最初的问题与此非常相似，因此我使用了此示例

请参阅此更新的答案

<html>
  <head>
    <title>Hello React</title>
  <script src="https://fb.me/react-0.13.2.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.io/typeahead.js/css/examples.css">
  </head>
  <body>
    <div id="example"></div>

    <div>
      <div id="bloodhound">
      <input class="typeahead" type="text" placeholder="States of US"/>
    </div>
    </div>
  </body>
     <script type="text/jsx">

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
    // constructs the suggestion engine
var states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.whitespace,
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  // `states` is an array of state names defined in "The Basics"
  local: states
});

$('#bloodhound .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'states',
  source: states
});

var Avatar = React.createClass({
  handleChange: function(e) {
    console.log(e.target.value);
  },
  componentDidMount: function() {
    React.findDOMNode(this.refs.myTextInput).focus();
    $ (React.findDOMNode(this.refs.myTextInput)).typeahead({
      hint: true,
      highlight: true,
      minLength: 1
    },
    {
      name: 'states',
      source: states
    });
  },
  render: function() {
    console.log('resd');
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
        <div id="bloodhound">
        <div>
          <input className="typeahead" type="text" placeholder="States of US" ref="myTextInput" name="sahan" onChange={this.handleChange} onBlur={this.handleChange} /></div>
        </div>
      </div>
    );
  }
});
var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});
var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'https://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});
React.render(
  <Avatar username="sports" />,
  document.getElementById('example')
);
    </script>
</html>

通常不需要在React JS应用中使用jQuery。通常，对于jQuery依赖库的反应替代方案常常。

谷歌搜索" hloodhound react j s"，让我到https://github.com/erikschlegel/reaect-twitter-typeahead，它适用于react js，不需要jquery。

更新的答案（最新反应）可能看起来像：https：//gist.github.com/rjurney/70725bac99999df3684faa150198c98c9a0a23

我无法将代码正确粘贴。

相关内容

最新更新

热门标签：