【React】
为了减少多种实现方式的迷惑出现
在此只展示我实际操作中使用的方式需求:就是在
React
语法下,点击表格中的数据,进行编辑、删除操作
<!-- 加载 React -->
<!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js"。-->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 在项目中尝试 JSX -->
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script crossorigin src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>
<script type="text/babel">
// Button集合 组件
class ButtonItem extends React.Component{
constructor(props) {
super(props);
this.editForOpenPopups = this.editForOpenPopups.bind(this);
this.delPostRecord = this.delPostRecord.bind(this);
}
//修改按钮点击事件
editForOpenPopups(){
const role_id = this.props.role_id;
editForOpenPopups('✎ 角色信息修改',role_id, '67%', '');
}
//删除按钮的点击事件
delPostRecord(event){
//return event.preventDefault(); //如果不想后面的操作了
const role_id = this.props.role_id;
delPostRecord(role_id);
}
render(){
return(
<div className="layui-btn-group">
<button className="layui-btn layui-btn-sm layui-btn-normal" title="编辑"
onClick={this.editForOpenPopups}>
<i className="layui-icon"></i>
</button>
<button className="layui-btn layui-btn-sm layui-btn-danger" title="删除"
onClick={this.delPostRecord}>
<i className="layui-icon"></i>
</button>
</div>
)
}
}
class TableNormal extends React.Component{
// 构造函数的初始化数据处理
constructor(props) {
super(props);
this.state = {roleList:[]};
}
//组件进入后,在第一次渲染后调用
componentDidMount(){
//ajax 数据获取
var toUrl = "{:url('cms/admin/role')}";
$.post(toUrl,function (result){
const data = result.data;
if(data.length > 0){
this.setState(()=>({
roleList:data
}))
}
}.bind(this),'JSON');
}
//当前组件元素渲染操作
render(){
return(
<React.Fragment>
{this.state.roleList.map((role) =>
<tr key={role.id} className={"tr-normal-"+role.id}>
<td className="title">{role.user_name}</td>
<td><span className="span-updated_at">{role.updated_at}</span></td>
<td><span className="span-list_order">{role.list_order}</span></td>
<td><div dangerouslySetInnerHTML = {{ __html: role.status_tip}} /></td>
<td>
<ButtonItem role_id={role.id} />
</td>
</tr>
)}
</React.Fragment>
)
}
}
//ReactDOM 的渲染操作
ReactDOM.render(
<TableNormal />,
document.getElementById("table-tbody-normal")
)
</script>
【注意】
着重注意我对点击事件的使用 "onClick={this.delPostRecord} "
同时对比参考点击事件的定义 this.delPostRecord = this.delPostRecord.bind(this);
//删除按钮的点击事件
delPostRecord(role_id,event){
//return event.preventDefault(); //如果不想后面的操作了
delPostRecord(role_id);
}
【React-传递函数给组件】
【总结】
鉴于点击事件的性能优化; 建议使用文中的方式,也可参考后面的文章; 对于富文本的转化显示,请注意
dangerouslySetInnerHTML
的使用!