用react实现对表格增删操作

< html >

< head >

< meta charset= "UTF-8" >

< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >

< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >

< title >Document </ title >

< script src= "../build/react.js" > < / script >

< script src= "../build/react-dom.js" > < / script >

< script src= "../build/browser.min.js" > < / script >

< script src= "../build/jquery.min.js" > < / script >

< script src= "./bootstrap.js" > < / script >

< link rel= "stylesheet" href= "./bootstrap.css" >

< style >

.table-row {

display: table-row;

}

.display-none {

display: none;

}

.modal-header {

border-bottom: none;

}

.modal-footer {

border-top: none;

}

.list-box {

margin-top: 20px;

}

.list-box .table tr td,

.list-box .table tr td {

width: 20%;

}

.list-box .table tr td p {

margin: 0;

vertical-align: middle;

}

< / style >

</ head >

< body >

< div id= "todolist" ></ div >

</ body >

< script type= "text/babel" >

var UserInfo = React. createClass({

getInitialState: function(){

return {

name: '',

job: '',

age: ''

}

},

getName: function( event){

this. setState({ name:event. target. value. trim()});

},

getJob: function( event){

this. setState({ job:event. target. value. trim()});

},

getAge: function( event){

this. setState({ age:event. target. value. trim()});

},

addUser: function(){

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

alert( "名字不能为空");

return;

}

if( this. state. age === ""){

alert( "年龄不能为空");

return;

}

if( this. state. job === ""){

alert( "工作不能为空");

return;

}

var obj = {

name: this. state. name,

job: this. state. job,

age: this. state. age

};

this. props. changeUser( obj);

this. setState({

name: '',

job: '',

age: ''

});

},

reSetForm: function(){

this. setState({

name: '',

job: '',

age: ''

});

},

render: function(){

return (

< div className= "info-box" >

< div className= "form-group" >

< label >username: </ label >

< input type= "text" className= "form-control" value={ this. state. name} onChange={ this. getName} />

</ div >

< div className= "form-group" >

< label >age: </ label >

< input type= "text" className= "form-control" value={ this. state. age} onChange={ this. getAge} />

</ div >

< div className= "form-group" >

< label >job: </ label >

< input type= "text" className= "form-control" value={ this. state. job} onChange={ this. getJob} />

</ div >

< button className= "btn btn-primary" onClick={ this. addUser} >添加 </ button >

< button className= "btn btn-default" onClick={ this. reSetForm} style={{ marginLeft: '12px'}} >重置 </ button >

</ div >

);

}

});

class Opertion extends React. Component{

render(){

return (

< div id= "dialog" className= "modal" tabindex= "-1" role= "dialog" aria-labelledby= "myModalLabel" aria-hidden= "true" >

< div >

< div className= "modal-dialog" >

< div className= "modal-content" >

< div className= "modal-header" >

< button type= "button" className= "close" data-dismiss= "modal" aria-hidden= "true" >× </ button >

< h4 className= "modal-title" >{ this. props. deleteIndex==- 100? "确认删除全部用户": "确认删除"+ this. props. deleteIndex+ "该用户"} </ h4 >

</ div >

< div className= "modal-body" >

< div className= "modal-footer" >

< button type= "button" className= "btn btn-default" data-dismiss= "modal" >取消 </ button >

< button type= "button" data-dismiss= "modal" className= "btn btn-primary" onClick={ this. props. deleteUser. bind( null, this. props. deleteIndex)} >确认 </ button >

</ div >

</ div >

</ div >

</ div >

</ div >

</ div >

)

}

hiddeDialog(){

return "modal"

}

}

var UserList = React. createClass({

getInitialState: function(){

return {

getDeleteIndex:- 100

};

},

delete: function(){

this. props. deleteUser();

},

render: function(){

var aa = this. props. deleteUser;

var self = this;

return(

< div className= "list-box" >

< table className= "table table-bordered table-hover" >

< thead >

< tr >

< th onClick={ this. delete} >Number </ th >

< th >Name </ th >

< th >Age </ th >

< th >Job </ th >

< th >Opertion </ th >

</ tr >

</ thead >

< tbody >

{

this. props. userListArr. map( function ( user, index) {

return (

< tr key={ index} >

< td >{ index+ 1} </ td >

< td >{ user. name} </ td >

< td >{ user. age} </ td >

< td >{ user. job} </ td >

< td >

< button className= "btn btn-danger" onClick={ self. props. setDeleteIndex. bind( null, index)} data-toggle= "modal" data-target= "#dialog" >删除 </ button >

</ td >

</ tr >

);

})

}

< tr className={ self. props. userListArr. length> 0? "table-row": "display-none"} >

< td colSpan= "5" className= "text-right" >

< button className= "btn btn-danger" onClick={ self. props. setDeleteIndex. bind( null,- 100)} data-toggle= "modal" data-target= "#dialog" >全部删除 </ button >

</ td >

</ tr >

< tr className={ self. props. userListArr. length> 0? "display-none": "table-row"} >

< td colSpan= "5" >

< p className= "text-center text-muted" >暂无数据... </ p >

</ td >

</ tr >

</ tbody >

</ table >

< Opertion deleteIndex={ self. props. deleteIndex} deleteUser={ self. props. deleteUser} />

</ div >

)

}

});

var UserBox = React. createClass({

getInitialState: function(){

return {

userListArr:[],

msg: '454878748',

deleteIndex:- 1,

};

},

changeUser: function( user){

var old = this. state. userListArr;

old. push( user)

this. setState({

userListArr:old

});

},

deleteUser: function( index){

if( index>- 1){

var old = this. state. userListArr;

old. splice( index, 1)

this. setState({

userListArr:old

});

} else{

this. deleteAllUser();

}

this. defaultIndex();

},

defaultIndex: function(){

this. setState({

deleteIndex:- 1

});

},

deleteAllUser: function(){

this. setState({

userListArr:[]

});

},

setDeleteIndex: function( index){

this. setState({

deleteIndex:index

});

},

render: function(){

return (

< div >

< UserInfo changeUser={ this. changeUser} />

< UserList userListArr={ this. state. userListArr} setDeleteIndex={ this. setDeleteIndex} deleteUser={ this. deleteUser} deleteIndex={ this. state. deleteIndex} />

</ div >

)

}

});

ReactDOM. render(

< UserBox />,

document. getElementById( "todolist")

)

< / script >

</ html >