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">&#xe642;</i>
                    </button>
                    <button className="layui-btn layui-btn-sm layui-btn-danger" title="删除"
                            onClick={this.delPostRecord}>
                        <i className="layui-icon">&#xe640;</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>

      this.delPostRecord = this.delPostRecord.bind(this);
    
	   //删除按钮的点击事件
       delPostRecord(role_id,event){
          //return event.preventDefault();  //如果不想后面的操作了
           delPostRecord(role_id);
       }