react mysql增删改查_React入门(增删改查)

@{

ViewData["Title"] = "Index";

}

自己敲的ajax

React 实例

//type="text/babel"

classUserGist extends React.Component {

constructor(props) {

super(props);//在state设置两个属性，以便后续通过state对象来对其进行修改

this.state ={List:[]};//绑定挂载事件

this.componentDidMount = this.componentDidMount.bind(this);

}

componentDidMount() {//接下来操作state时上下文对象发生改变，此处拿到操作句柄

var that = this;//ajax请求

this.serverRequest =$.ajax({

url:this.props.source,

type:"GET",

dataType:'json',

success: function (result) {

console.log(result);var lastGist =result;//此处的上下文发生改变，this的指针指向发生了变化，通过上述定义的that来操作

that.setState({

List: result,

})

}

})

}

DelUser(index) {const insertUser = "http://localhost:58646/api/Qx/DelLog?id=" +index

fetch(insertUser, { method:"post"}

)

.then(response=>response.json())

.then(data=>{

console.log(data)this.setState({

List:this.state.List

})if (data > 0) {

alert("删除成功");

window.location.href= "http://localhost:62817/Ajax/Index";

}

})

}//卸载React组件时，把多余请求关闭，以免影响其他框架或组件的操作

componentWillUnmount() {this.serverRequest.abort();

}//添加按钮跳转事件

AddReact() {

window.location.href= "http://localhost:62817/Ajax/Add";

}//修改按钮点击跳转事件

UptUser(id){

window.location.href= "http://localhost:62817/Ajax/Upt?id="+id;

}//查询按钮点击事件

CxReact()

{const insertUser = "http://localhost:58646/api/Qx/CxLog?name=" +this.name.value

fetch(insertUser, { method:"post"}

)

.then(response=>response.json())

.then(data=>{

console.log(data)this.setState({

List: data

})//if (data > 0) {//window.location.href = "http://localhost:62817/Ajax/Index";//}

})

}

render() {return(

添加操作人名称是: this.name = name} />

查询

主键Id操作人操作状态操作时间操作

{this.state.List.map((item,index) =>{return({item.lId}{item.userName}{item.state}{item.time}删除修改)

}

)

}

@*{this.state.date[0].userName} 用户最新的 Gist 共享地址： {this.state.lastGistUrl}*@

);

}

}

ReactDOM.render(,

document.getElementById('example')

);