Javascript 使用后端api在reactjs中创建CRUD UI

我在laravel中创建了一个CRUD应用程序，但现在我想用react.js改进UI。我还没有反应过来，所以不知道该怎么做

到目前为止，我已经创建了一个表组件，它显示所有使用react的用户。我应该如何使用react router或任何可用的工具来实现

users/{id}

、

users/create

、

users/{id}/edit

，以便当我单击“show user”按钮时，会出现另一个具有用户详细信息的组件来替换同一视图中的users表

还有一个问题，如何将对象从后端传递到react视图

谢谢

这就是我现在拥有的：

import React from 'react';
import Router from 'react-router'; 
import { Route, Link, RouteHandler } from 'react-router';

var FilterableTable = React.createClass({
  getInitialState: function() {
    return {
      data: [],
      filterText: ''
    };
  },
  handleUserInput: function(filterText) {
    this.setState({
      filterText: filterText
    });
  },
  loadDataFromServer: function() {
    $.ajax({
      url: this.props.url,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadDataFromServer();
  },
  render: function() {
    return (
      <div>
        <NavBar
          filterText={this.state.filterText}
          onUserInput={this.handleUserInput}
        />
        <ObjectTable
          data={this.state.data}
          filterText={this.state.filterText}
        />
        <RouteHandler/>
      </div>
    );
  }
});


var NavBar = React.createClass({
  handleChange: function() {
    this.props.onUserInput(
      this.refs.filterTextInput.getDOMNode().value
    );
  },
  render: function() {
    return (

      <nav className="navbar">
        <ul className="nav navbar-nav">
           <li>
              <Link to="/admin/users">All users</Link>
           </li>
           <li>
              <Link to="/admin/users/create">Create a user</Link>
           </li>
        </ul>
        <form className="form-group pull-right">
          <input
            className="form-control"
            type="text"
            placeholder="Search..."
            value={this.props.filterText}
            ref="filterTextInput"
            onChange={this.handleChange}
          />
        </form>
      </nav>
    );
  }
});

var ObjectTable = React.createClass({
  render: function() {
    var rows = [];
    this.props.data.forEach(function(object) {
      if (object.username.indexOf(this.props.filterText) === -1 &&     object.email.indexOf(this.props.filterText) === -1)
        return;
      rows.push(<ObjectRow object={object} key={object.uid}/>);

    }.bind(this));
    return (
      <table className="table table-striped table-bordered">
        <thead>
            <tr>
              <td>ID</td>
              <td>Username</td>
              <td>Email</td>
              <td>Actions</td>
            </tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    );
  }
});

var ObjectRow = React.createClass({
  render: function() {
    var objId = this.props.object.uid;

    return (
      <tr>
        <td>{this.props.object.uid}</td>
        <td>{this.props.object.username}</td>
        <td>{this.props.object.email}</td>
        <td>
          <Link to="/admin/users/:objId" params={{objId: objId}} className="btn btn-small btn-success">Show</Link>
          <Link to="/admin/users/:objId/edit" params={{objId: objId}} className="btn btn-small btn-info">Edit</Link>
        </td>
      </tr>
    );
  }
});

var ShowObject = React.createClass({
  render: function() {

     return (

      <h1>showing a user</h1>
    );
  }
});


var routes = (
  <Route path="admin/users" handler={FilterableTable}>
    <Route path="/admin/users/:objId/edit" />
    <Route path="/admin/users/create" handler={CreateObject} />
    <Route path="/admin/users/:objId" handler={ShowObject} />
  </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {  
  React.render(<Handler url="/admin/get_users" />,  document.getElementById('app'));
});

从“React”导入React；
从“反应路由器”导入路由器；
从“react router”导入{Route，Link，RouteHandler}；
var FilterableTable=React.createClass({
getInitialState:函数（）{
返回{
数据：[]，
筛选器文本：“”
};
},
handleUserInput：函数（filterText）{
这是我的国家({
过滤文本：过滤文本
});
},
loadDataFromServer:函数（）{
$.ajax({
url:this.props.url，
成功：功能（数据）{
this.setState（{data:data}）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
componentDidMount:function（）{
这是loadDataFromServer（）；
},
render:function（）{
返回(
);
}
});
var NavBar=React.createClass({
handleChange:function（）{
这个.props.onUserInput(
此.refs.FilterTestInput.getDOMNode（）值
);
},
render:function（）{
返回(


所有用户


创建用户


);
}
});
var ObjectTable=React.createClass({
render:function（）{
var行=[]；
this.props.data.forEach（函数（对象）{
if（object.username.indexOf（this.props.filterText）==-1&&object.email.indexOf（this.props.filterText）==-1）
回来
rows.push（）；
}.约束（这个）；
返回(
身份证件
用户名
电子邮件
行动
{rows}
);
}
});
var ObjectRow=React.createClass({
render:function（）{
var objId=this.props.object.uid；
返回(
{this.props.object.uid}
{this.props.object.username}
{this.props.object.email}
显示
编辑
);
}
});
var ShowObject=React.createClass({
render:function（）{
返回(
显示用户
);
}
});
变量路由=(
);
run（routes，Router.HistoryLocation，函数（Handler）{
React.render（，document.getElementById（'app'））；
});

因此，要回答您的两个问题：

React路由器使用起来非常简单，文档非常简单 伟大的你只需要在地图上创建你想要的不同路线 客户端。在你的情况下，你将有三条路线。最好的方法是真正检查文档，这是非常好的

要从后端获取数据，无论它是否响应，您 我们必须使用ajax。您可以使用jQuery并从

componentDidMount

方法并更新您的组件的状态 相应的组件。这实际上就是你正在做的事情，而且 效果很好。您可能需要考虑通量模式来避免。 在react组件中进行数据管理，并将其 系统中的简单视图

---

嘿，我有动作的路线，但我不知道如何进行组件转换。假设我有一个组件a显示视图中的所有用户。我想隐藏组件A并显示另一个组件B，单击按钮时显示用户详细信息。谢谢。你需要叫一个过渡。基本上，每个路由器处理程序都是一个视图。因此，当您转换时，它将只渲染一个新视图