个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在为我的应用程序使用 React，我注意到当我尝试在 React 组件内部使用时，Twitter Typeahead 库不起作用。我知道那里有很多其他的 React 自动完成库，但我想知道为什么它不能与 Twitter 的 typeahead 一起使用，而 React 已知可以与 jQuery 和多个其他库一起使用
更新:
作为示例，我使用了 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>
在组件外部工作的框在 React 组件中呈现时不是同一个框。我原来的问题与此非常相似，因此我使用了这个例子
最佳答案
请查看这个更新的答案
<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>
关于typeahead.js - 为什么 React.js 不能与 Twitter 的 Typeahead 库一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30158084/
24
4
0
Java 库和 android 库有什么区别，各自有什么优点/缺点？ 最佳答案 您可以在 Android 应用程序中包含标准 Java .jar 文件库。它们在 .apk 构建时被翻译成 Dalvik
所以，我现在的代码就像从 Java 层加载库(比如 liba.so)，并在内部 liba.so 加载 libb.so。因此，如果我必须将所有库打包到 APK 中并将其安装在没有 root 访问权限的设
我想在我的系统中设置 LEDA 库。 我已经从以下链接下载了 LEDA 库 http://www.algorithmic-solutions.info/free/d5.php Instruct
我想用 autoconf 创建一个共享库。但是，我希望共享库具有“.so”扩展名，而不是以“lib”开头。基本上，我想制作一个加载 dlopen 的插件。 .是否有捷径可寻？ 当我尝试使用 autoc
我需要在 Apps 脚本应用程序上修改 PDF。为此，我想使用 JS 库:PDF-LIB 我的代码: eval(UrlFetchApp.fetch("https://unpkg.com/pdf-lib
我正在构建一个使用以下 Boost header 的程序(我使用的是 Microsoft Visual C++ 10)， #include #include #include #include
当我通过 cygwin 在 hadoop 上运行此命令时: $bin/hadoop jar hadoop-examples-*.jar grep input output 'dfs[a-z.]+' 我
我已经通过 vcpgk 成功安装了一个 C++ 库，名为:lmdb:x64-windows 我还安装了lmdb通过 Cabal 安装的 Haskell 绑定(bind)包 在尝试测试 lmdb 包时:
我该如何解决这个问题？ 我刚刚将 javacv jar 文件复制到我的项目 Lib 文件夹下，但出现了这个错误! 我可以找到这个thread来自谷歌，但不幸的是，由于我国的谷歌限制政策，该页面无法打开
我有一个 Android 库项目 FooLib。 FooLib 引用 Android Context 之类的东西，但不需要任何资源文件(res/ 中的东西)所以我目前将其打包为供我的应用使用的 JAR
我正在开发一个 Android 应用程序(使用 Android Studio)，它能够通过手势识别算法了解您正在进行的 Activity 。对于我使用 nickgillian ithub 帐户上可用的
关于从 .NET Framework 项目中引用 .NET Standard 类库的问题有很多类似的问题，其中 netstandard 库中的 NuGet 包依赖项不会流向 netframework
我已经从互联网上下载了 jna-4.2.2.jar，现在想将这个 jar 导入到我的项目中。但是当我试图将这个 jar 导入我的项目时，出现以下错误。 [2016-06-20 09:35:01 - F
我正在尝试通过编译在 Mac 上安装 rsync 3.2.3。但是，我想安装所有功能。为此，它需要一些库，此处 ( https://download.samba.org/pub/rsync/INSTA
进入 Web 开发有点困难。过去 5 年我一直致力于 winforms 工作。所以我正在努力从一种切换到另一种。前段时间，我使用过 JavaScript，但现在还没有大量的 JavaScript 库
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
我正在寻找一个用Python编写的与logstash(ruby + java)类似的工具/库。 我的目标是: 从 syslog 中解析所有系统日志 解析应用程序特定日志(apache、django、m
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
我花了几天时间试图寻找用于 JavaPOS 实现的 .jar 库，但我找不到任何可以工作的东西。我找到了很多像这样的文档:http://jpos.1045706.n5.nabble.com/file/
这个问题在这里已经有了答案: Merge multiple .so shared libraries (2 个答案) 关闭 9 年前。 我有我在代码中使用的第三方库的源代码和对象。该库附带有关如何使
我是一名优秀的程序员,十分优秀！