Suggestion list doesn't update correctly after adding new element using react
Question
I have a list in array like,
ReactDOM.render(<FilteredList labelInfo = { labelArr } />, document.getElementById('labels'));
and data in array is,
labelArr.push({ "Label": "abc", "id": "a.dfg", "src_tbl": "d_v" });
React function is as,
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 call newAddedLabel() and add new values in it.. The main problem is when I started searching in input box, it makes a list of suggestions list(which shows on typing in inputbox) and save in a LabelList and then if I add a new value by clicking in fa-plus it shows only suggested list only instead of whole list..how can I display whole list when new label is added?
2 answers
solution1
1 ACCPTED 2016-12-15 04:36:18
You are calling the filterList function onChange
<input type="text" id="searchBox" placeholder="Search" onChange={this.filterList}/>
inside this function you are changing the state of initialItems
var updatedList = this.state.initialItems[0];
This why after you put some value inside the input your initialItems change, make a clone of this array like this:
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>
solution2
0 2016-12-15 05:17:17
If you want to achieve that using the above code, you can have a boolean variable in your state which decides weather to render the suggested list or the initial list.
The in the render method, the List component should be implemented like this:
<List items={this.state.showInitialList?this.state.initialItems:LabelList} />
You can set the showInitialList variable in your state to true whenever fa-plus is clicked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.