【发布时间】：2015-05-11 00:32:06
【问题描述】：
我正在为我的应用程序使用 react，当我尝试在 React 组件中使用时，我注意到 Twitter Typeahead 库不起作用。 我知道还有很多其他 react 自动完成库，但我想知道为什么当 react 可以很好地与 jQuery 和多个其他库一起使用时，它为什么不能与 Twitter 的 typeahead 一起使用
更新：
作为示例，我使用了 fb 头像示例代码并尝试使用 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>
在组件之外的盒子可以工作，但在反应组件中呈现时不是同一个盒子。我最初的问题与此非常相似，因此我使用了此示例
【问题讨论】：
-
我也在 react 组件中使用了 typeahead ，它可以工作。你能显示一些代码吗？
-
你需要绑定输入事件（typeahead:selected 和 typeahed:autocompleted）来更新你的组件状态（例如设置输入字段的值）
-
谢谢蒂洛。您能否更正上面的代码，以便我知道您在说什么
-
另外，组件的预输入初始化必须在
componentDidMount中完成。网上找不到好的例子，抱歉。为这个问题 +1。 -
@sarathjoseph 如何处理输入变化？
标签： typeahead.js