Question

我在数组中有一个列表，如

ReactDOM.render(<FilteredList labelInfo = { labelArr } />, document.getElementById('labels'));

和数组中的数据是，

labelArr.push({ "Label": "abc", "id": "a.dfg", "src_tbl": "d_v" });

反应函数为，

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添加新值，它只显示建议列表而不是整个列表..如果添加新标签，我可以显示整个列表吗？

Answer 1

您正在调用filterC函数onChange

var updatedList = this.state.initialItems[0];

在此函数中，您正在更改initialItems的状态

var updatedList = this.state.initialItems[0].slice();

这就是为什么在你的initialItems输入的输入中放入一些值之后，为此克隆这个数组：

<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>

＆＃13;

{{1}}

＆＃13;

Answer 2

如果你想使用上面的代码实现这一点，你可以在你的状态中有一个布尔变量来决定天气以呈现建议的列表或初始列表。

在render方法中，List组件应该像这样实现：

while True:
    k = win.checkKey()
    if k == 'Left':
        object.move(-dx, dy)
    elif k == 'Right':
        object.move(dx, dy)
    elif k == 'period':
        break

只要单击fa-plus，就可以将状态中的showInitialList变量设置为true。

使用react添加新元素后，建议列表无法正确更新

2 个答案: