0
검색 및 편집 기능이있는 테이블을 만들고 있습니다. 내 솔루션 검색이 제대로 작동하지 않는 문제가 있습니다. 그러나 <EditableCell id={person.id} data={person.name} /> 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);
? 나는 http://jsfiddle.net/kb3gN/8754/에 코드를 붙여 넣었고 괜찮아요 ..? 회신에 감사드립니다. –
. 나는 jsfiddle 코드를 보았다. 내가 에스더를 찾을 때 그 헨리크가 여전히 내 문제 다. –