Javascript 搜索功能工作不正常

我只是创建一个带有搜索和编辑功能的表。我的解决方案有一个问题，搜索无法正常工作。但是如果我从DisplayTable类中删除

此行，搜索功能将正常工作，但编辑功能代码将写入该类中。我不知道如何解决这个问题

/**
 * @jsx React.DOM
*/
//Making the main component, InstantBox


 var InstantBox = React.createClass({

  doSearch:function(queryText)
  {
   console.log(queryText)
   //get query result
    var queryResult=[];
  this.props.data.forEach(function(person)
   {

   if(person.name.toLowerCase().indexOf(queryText)!=-1)
    queryResult.push(person);
  });

   this.setState({ query:queryText, data:queryResult })

  },

  handleClick: function() {
    this.setState({ showResults: true });     

   },
    getInitialState:function(){

     return{data:this.props.data,showResults: false}    
  },

    onChangeName:function(e){     
   this.setState({name:e.target.value})

  },
  onChangePhone:function(e){    
  this.setState({phone:e.target.value})
  },
  onChangeEmail:function(e){
  this.setState({email:e.target.value})
  },
  handleSubmit:function(e){

 if(this.state.name==null){

  alert("Data cannot be added without name");

 }else{

 this.setState({ showResults: false });
e.preventDefault();
this.state.data.push({name:this.state.name,phone:this.state.phone,email:this.state.email});
this.setState({name:'',phone:'',email:''})    
 var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert( xmlhttp.responseText);
        }
    }

     xmlhttp.open("GET", "insert.php?n=" +           
     this.state.name+"&p="+this.state.phone+"&e="+this.state.email, true);
    xmlhttp.send();
  }
  },
  render:function(){


      return (

            <div id="wrapper">             

                <div className="InstantBox" >   
                <h3 className="head">Contact List</h3>  
                <label> search  </label>              
                <SearchBox query={this.state.query} doSearch={this.doSearch}/> 
        <EditableCell id={this.state.query}   />
                <label>     </label>              
                <input type="submit" value="ADD" onClick={this.handleClick} />  
                <p></p>                    
                <DisplayTable data={this.state.data}/>

             </div>
            <div >                    
                 { this.state.showResults ? 
                <Results onChangeName={this.onChangeName}
                onChangePhone={this.onChangePhone}
                onChangeEmail={this.onChangeEmail}
                handleSubmit={this.handleSubmit}  /> 
                : null }
            </div> 
           </div>


        );
     }
   });


 var Results = React.createClass({      
   render: function() {
    return (
        <div id="results" className="search-results">
           <form  onSubmit={this.props.handleSubmit}>        
    <table className="addform">
    <thead>
         <tr> <th>Add New Contact</th> </tr>                 
        <tr><th><input type="text"  placeholder="Name" value={this.name}onChange=   
 {this.props.onChangeName}/></th> </tr>
        <tr><th><input type="text" placeholder="Phone" value={this.props.phone}onChange=

  {this.props.onChangePhone}/></th>  </tr>
        <tr><th><input type="text" placeholder="Email Name"  value={this.props.email}onChange=
   {this.props.onChangeEmail}/></th>  </tr>
        <tr><th><button >SAVE</button></th>

        </tr>
    </thead>
    </table>
    </form> 
        </div>
    );
   },

   });
 var SearchBox = React.createClass({
  doSearch:function(){

    var query=this.refs.searchInput.getDOMNode().value; // this is the search text
    this.props.doSearch(query);


    },


   render:function(){

    return <input type="text" ref="searchInput" placeholder="Search Name" value=   
     {this.props.query} onChange={this.doSearch}/>
  }


});



 var EditableCell = React.createClass({
  getInitialState: function () {
    return {
        isEditMode: false,
        data: ""
    };
   },
   componentWillMount: function () {
    this.setState({
        isEditMode: this.props.isEditMode,
        data: this.props.data


    });
   },
   handleEditCell: function (evt) {
      this.setState({isEditMode: true});

   },
  handleKeyDown: function (evt) {

    switch (evt.keyCode) {
        case 13: // Enter          

        case 9: // Tab
            this.setState({isEditMode: false});
            break;

    }
        if(evt.keyCode==13){

       var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert( xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", "update.php?n=" + this.state.data+"&i="+this.props.id, true);
    xmlhttp.send();
    }

   },
  handleChange: function (evt) {
    this.setState({data: evt.target.value}); 

   },


   render: function () {
    var cellHtml;
    var current_data;
   var counter=0;

   //alert(this.props.data);

    if (this.state.isEditMode) {


        cellHtml = <input type='text' value={this.state.data}
            onKeyDown={this.handleKeyDown} onChange={this.handleChange} />
    }
    else {
        cellHtml = <div onClick={this.handleEditCell}>{this.state.data}</div>
    }
    return (
        <td>{cellHtml}</td>
        );
     }
  });



 var DisplayTable = React.createClass({

   render:function(){
    //making the rows to display

    var rows=[];
    this.props.data.forEach(function(person)
 {

    rows.push(<tr >
   <EditableCell id={person.id} data={person.name}  />

       <td><a href="url">Phone</a></td>
         <td><a href="url">email</a></td></tr>
        )
    }.bind(this));


    //returning the table
    return(


         <table className="tableFormt">
            <thead>            
                <tr>                       
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Email</th>
                </tr>
            </thead>             
            <tbody>{rows}
            </tbody>
        </table>        

        );      
      }
   });  



    React.renderComponent( <InstantBox data={result} id={result} /> ,document.body);

/**
*@jsx React.DOM
*/
//制作主要组件InstantBox
var InstantBox=React.createClass({
doSearch：函数（queryText）
{
console.log（queryText）
//获取查询结果
var queryResult=[]；
this.props.data.forEach（函数（人）
{
if（person.name.toLowerCase（）.indexOf（queryText）！=-1）
查询结果推送（人）；
});
this.setState（{query:queryText，data:queryResult}）
},
handleClick:function（）{
this.setState（{showResults:true}）；
},
getInitialState:函数（）{
返回{data:this.props.data，showResults:false}
},
onChangeName:函数（e）{
this.setState（{name:e.target.value}）
},
onChangePhone:函数（e）{
this.setState（{phone:e.target.value}）
},
onChangeEmail:函数（e）{
this.setState（{email:e.target.value}）
},
handleSubmit:函数（e）{
if（this.state.name==null）{
警报（“无法添加没有名称的数据”）；
}否则{
this.setState（{showResults:false}）；
e、 预防默认值（）；
this.state.data.push（{name:this.state.name，phone:this.state.phone，email:this.state.email}）；
this.setState（{name:''，电话：''，电子邮件：'}）
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
警报（xmlhttp.responseText）；
}
}
xmlhttp.open（“GET”、“insert.php？n=“+
this.state.name+“&p=“+this.state.phone+”&e=“+this.state.email，true）；
xmlhttp.send（）；
}
},
render:function（）{
返回(
联系人名单
搜索

{this.state.showResults？
：null}
);
}
});
var Results=React.createClass（{
render:function（）{
返回(
添加新联系人
拯救
);
},
});
var SearchBox=React.createClass({
doSearch:function（）{
var query=this.refs.searchInput.getDOMNode（）.value；//这是搜索文本
this.props.doSearch（查询）；
},
render:function（）{
回来
}
});
var EditableCell=React.createClass({
getInitialState:函数（）{
返回{
isEditMode:false，
数据：“”
};
},
componentWillMount:函数（）{
这是我的国家({
isEditMode:this.props.isEditMode，
数据：this.props.data
});
},
handleEditCell:函数（evt）{
this.setState（{isEditMode:true}）；
},
handleKeyDown：功能（evt）{
开关（evt.keyCode）{
案例13://输入
案例9://选项卡
this.setState（{isEditMode:false}）；
打破
}
如果（evt.keyCode==13）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
警报（xmlhttp.responseText）；
}
}
xmlhttp.open（“GET”、“update.php？n=“+this.state.data+”&i=“+this.props.id，true”）；
xmlhttp.send（）；
}
},
handleChange:功能（evt）{
this.setState（{data:evt.target.value}）；
},
渲染：函数（）{
var-cellHtml；
var当前_数据；
var计数器=0；
//警报（此.props.data）；
if（this.state.isEditMode）{
cellHtml=
}
否则{
cellHtml={this.state.data}
}
返回(
{cellHtml}
);
}
});
var DisplayTable=React.createClass({
render:function（）{
//使行显示
var行=[]；
this.props.data.forEach（函数（人）
{
推(
)
}.约束（这个）；
//还桌
返回(
名称
电话
电子邮件
{rows}
);      
}
});  
React.renderComponent（，document.body）；

您的问题有两种可能的解决方案：

1） 将密钥属性传递给

EditableCell

组件：

<EditableCell id={person.id} data={person.name}  key={person.name}/>

 componentWillReceiveProps: function(nextProps){
       this.setState({"data":nextProps.data});
 },

在当前代码中，在第一次渲染中，将渲染两行。过滤结果时，第一个EditableCell作为数据属性传递“Esther”，但未设置状态。您只能在componentDidMount功能中设置状态。所以亨里克留下来了。第二行不渲染，因为只有一个结果

---

阅读有关对账的内容也会有所帮助：

您的具体问题是什么？我已将代码粘贴到中，搜索结果正常..？谢谢您的回复。我看到了JSFIDLE代码。当我搜索埃丝特时，它仍然显示亨里克这是我的问题