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

Question

我在 laravel 中创建了一个 CRUD 应用程序，但现在我想用 react.js 改进 UI。我对反应还很陌生，所以不确定如何去做。

到目前为止，我已经创建了一个 table 组件来显示所有有反应的用户。我应该如何使用 react-router 或任何可用的工具来实现 users/{id}、users/create、users/{id}/edit 等，以便当我单击 "show user" 按钮时，将出现另一个包含用户详细信息的组件替换同一视图中的用户 table。

还有一个问题，如何将对象从后端传递到 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'));
});

Answer 1

所以回答你的两个问题：

React-router 使用起来非常简单，文档是伟大的。你只需要创建你想要的不同路线客户端。在您的情况下，您将拥有三条路线。最好的办法是查看有关 react-router
要从后端获取数据，不管是react还是react，你必须使用 ajax。您可以使用 jQuery 并从 componentDidMount 方法并更新你的反应状态相应的组件。这实际上就是你正在做的，而且它效果很好。您可能需要考虑 Flux 模式以避免在你的反应组件中进行数据管理并让它们成为系统中的简单视图。

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

Create CRUD UI in reactjs with backend api

javascript

laravel

reactjs

react-router