个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个数组列表，例如，
ReactDOM.render(<FilteredList labelInfo = { labelArr } />, document.getElementById('labels'));
数组中的数据是，
labelArr.push({ "Label": "abc", "id": "a.dfg", "src_tbl": "d_v" });
React 函数为，
var FilteredList = React.createClass({
filterList: function(event) {
var updatedList = this.state.initialItems[0];
updatedList = updatedList.filter(function(item) {
return (item.Label.toLowerCase().search(event.target.value.toLowerCase()) !== -1 || item.id.toLowerCase().search(event.target.value.toLowerCase()) !== -1);
});
this.setState({items: updatedList});
LabelList = updatedList;
},
getInitialState: function() {
LabelList = this.props.labelInfo;
return {
initialItems: [ this.props.labelInfo ]
}
},
componentWillMount: function() {
this.setState({items: this.state.initialItems[0]})
},
newAddedLabel: function(e) {
//some code..
LabelList.push({ "Label": $('#lbl_txt').val(), "id": labelId , "type": "text"});
<List items={LabelList} />
//this.state.initialItems[0] = LabelList;
this.setState({items: LabelList});
},
changedLabel: function(e) {
//some code..
if( labelIndex > -1 )
{
LabelList[labelIndex].Label = $('#changelbl_txt').val();
LabelList[labelIndex].id = $('#changelbl_id').val();
}
<List items={LabelList} />
//this.state.initialItems[0] = LabelList;
this.setState({items: LabelList});
},
render: function() {
return (
<div className="filter-list">
<input
type="text"
id="searchBox"
placeholder="Search"
onChange={this.filterList}/>
<i
className="fa fa-plus addLabel"
title="Add a new label"
id="add_label"
onClick={this.addLabel}>
</i>
<List items={LabelList}/>
</div>
);
}
});
addLabel 调用 newAddedLabel() 并在其中添加新值。主要问题是当我开始在输入框中搜索时，它会生成一个建议列表(在输入框中输入时显示)并保存在 LabelList 中，然后如果我通过单击 fa-plus 添加新值，它仅显示建议列表而不是整个列表..添加新标签时如何显示整个列表？
最佳答案
您正在调用filterList函数onChange
<input type="text" id="searchBox" placeholder="Search" onChange={this.filterList}/>
在此函数内，您将更改initialItems的状态
var updatedList = this.state.initialItems[0];
这就是为什么在您在初始项目更改的输入中放入一些值后，像这样克隆该数组:
var updatedList = this.state.initialItems[0].slice();
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
<h1>Example</h1>
<div id='root'></div>
<script type="text/babel">
var FilteredList = React.createClass({
filterList: function(event) {
if(event.target.value.trim() === ''){
this.setState({ suggest: [] })
return
}
var updatedList = this.state.initialItems.slice();
updatedList = updatedList.filter(function(item) {
return (item.Label.toLowerCase().search(event.target.value.toLowerCase()) !== -1 || item.id.toLowerCase().search(event.target.value.toLowerCase()) !== -1);
});
this.setState({suggest: updatedList || []});
},
getInitialState: function() {
return {
initialItems: [ this.props.labelInfo ],
items: [ this.props.labelInfo ],
suggest: [],
id: 1
}
},
newAddedLabel: function(e) {
var newId= ++this.state.id + ""
var item = { "Label": this.refs.keyword.value, "id": newId , "type": "text"}
var newItems = this.state.initialItems.slice()
newItems.push(item)
var newItems2 = this.state.items.slice()
newItems2.push(item)
this.setState({initialItems: newItems, items: newItems2 });
},
render: function() {
return (
<div className="filter-list">
<input
type="text"
ref="keyword"
id="searchBox"
placeholder="Search"
onChange={this.filterList}/>
<button
className="fa fa-plus addLabel"
title="Add a new label"
id="add_label"
onClick={this.newAddedLabel}>Add
</button>
<u>{ this.state.suggest.map(e => <li value={e.id}>{e.Label}</li>) }</u>
<h1>Saved List</h1>
<u>{ this.state.items.map(e => <li value={e.id}>{e.Label}</li>) }</u>
</div>
);
}
});
ReactDOM.render(<FilteredList labelInfo = { { "Label": "abc", "id": "a.dfg", "src_tbl": "d_v" } } />, document.getElementById('root'))
</script>
</body>
</html>关于javascript - 使用 react 添加新元素后，建议列表无法正确更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41156357/
25
4
0
我正在用 Java 编写代码，并且使用 Vaadin 8 扩展。 我有一个 Vaadin 组合盒，效果很好。但我不仅想从组合框中选择项目，还想选择书面输入。这意味着我想使用组合框作为下拉菜单以及文本编
我正在尝试将 AJAX 添加到 JQuery ListView 中并呈黄色闪烁，但我似乎无法使其正常工作。谁能指出我正确的方向？ http://jsfiddle.net/zFybm/ 最佳答案 根据
我有这个样式表: .pixel{ position: absolute; height: 10px; width: 10px; background-color: #f
这是我用来将新行推送到容器的一行代码: this.$el.append(new ItemView(item).render().el); 其中item是Backbone.js model，render
我正在尝试在 anguar.js 中制作一些测试应用程序，但遇到了问题。我的 js 文件包含: live = angular.module('live',[]); live.controller('p
如何绑定(bind)页面加载后创建的新元素？ 我有这样的东西 system = function() { this.hello = function() { alert
html5 新元素(页眉、导航、页脚等)在 IE 中不工作 最佳答案 您需要包含 HTML5 shiv 脚本以允许在旧版 IE 浏览器中设置 HTML5 元素的样式:http://code.googl
我是一名优秀的程序员,十分优秀！