我对网络开发完全陌生,所以请容忍我,哈哈。
以下是我正在尝试做的事情的简要说明:
- 使用 Bootstrap 制作一个 HTML 网页,显示元素列表(以一组复选框、标签等的形式)
- 结合使用 JQuery 和 React,使这些元素动态化。
下面是我目前正在努力实现它的要点。 示例列表
<ul class="list-group" id="PortfolioListOfStocks" >
<li class="list-group-item" id="stockTicker0">1</li>
<li class="list-group-item" id="stockTicker1">2</li>
<li class="list-group-item" id="stockTicker2">3</li>
<li class="list-group-item" id="stockTicker3">4</li>
<li class="list-group-item" id="stockTicker4">5</li>
</ul>
我可以使用此react 代码静态访问和编辑一定数量的这些复选框(将成为代码)。 Tickers 只是一个 Ticker 对象的数组,它们现在只是被视为字符串:
render: function () {
for (var i=0; i < this.state.tickers.length; i++) {
document.getElementById("stockTicker"+i).innerHTML = this.state.tickers[i];
}
return null;
}
这样我就可以编辑和访问复选框了,太棒了!但我遇到的问题是如何从 0 个复选框开始,只在需要时添加复选框,在不需要时删除复选框,基于数组的长度。所以当 size = 3 时,只有 3 个元素,但是当 size = 15 时,一个 15 的可滚动框。
我知道我可以使用 JQuery/JS 添加复选框,这很容易被调用。它看起来像这样
$('#addCheckbox').click(function() {
var text = $('#newCheckText').val();
$('#cblist').append('<input type="checkbox" id = "changeThis" /> ' + text + '<br />');
});
但问题是我无法使用 Bootstrap 格式创建元素,复选框未对齐(它们看起来像下图),并且 Bootstrap 主题未保留.我尝试使用 CSS,但它不适合我。
总的来说,我如何根据数组的长度来显示元素的数量?我真的只是在为 HTML 和脚本之间的互连而苦苦挣扎。感谢阅读!!
最佳答案
以下应该有效:
render: function () {
var tickerGroupItems = this.state.tickers.map(function(ticker){
return <li key={ticker.id} className='list-group-item' id={'stockTicker' + ticker.id}>{ticker.name}</li>
});
return(
<ul className="list-group" id="PortfolioListOfStocks" >
{tickerGroupItems}
</ul>
);
}
关于javascript - 使用 JQuery + React 使 HTML Bootstrap 元素动态化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35717503/