草庐IT

javascript - 带有 Material-UI 的 ReactJS : How to sort an array of Material-UI's <TableRow> alphabetically?

coder 2024-07-15 原文

目前，我渲染 Material-UI 的 <Table>'s <TableRow> ( http://www.material-ui.com/#/components/table ) 与一个数组 <TableRow>s并使用 .map() .每个<TableRow>有一个 <TableRowColumn>代表名字，像这样<TableRowColumn>Josh</TableRowColumn> .

但是，如果用户按下按钮，我想对 <TableRow> 进行排序按 <TableRowColumn>'s 字母顺序排列名。所以说例如 10 <TableRow>s ，如果数组 [0] 的名字是 Conny，而数组 [1] 的名字是 Adrian，则希望数组 [1] 成为数组 [0]。

正确的做法是什么？任何指导或见解将不胜感激。

编辑

每一行都会像数组 rows 那样呈现, 具有属性为 firstName 的对象和 favColor :

        {
          rows.map((row) => {
            return(
              <UserRow
                firstName={row.firstName}
                favColor={row.favColor}
              />
            )
          })
        }

每行定义如下:

const UserRow = (props) => {
  const {firstName, favColor} = props

  return (
    <TableRow>
      <TableRowColumn>{firstName}</TableRowColumn>
      <TableRowColumn>{favColor}</TableRowColumn>
    </TableRow>
  )
}

最佳答案

我会在应用将创建 TableRows 的 map 操作之前对数组进行排序。

react 的思维方式是声明式的。这意味着在视觉层面上，您应该提供应显示的元素。因此，在将它们传递给 View 组件之前，它们会被排序。

例如(我不能使用 material-ui 元素，因为示例没有在 stackoverflow 设置中运行。只需将 TableComponent 的所有元素替换为它们的 material-ui alter ego。): 

const data = [
  {firstname: "John", lastname: "Rover",  id:12},
  {firstname: "Bob",  lastname: "Taylor", id:24},
  {firstname: "Lucy", lastname: "Heart",  id:43}
]

// The table component is unaware of the data order operations
const TableComponent = ({tableData}) => <table><tbody>
  {tableData.map(d=> <tr key={d.id}>
      <td>{d.firstname}</td>
      <td>{d.lastname}</td>
  </tr>)}
</tbody></table>

// The parent component takes care of feeding the Table
// component with the data in the correct order.  
class App extends React.Component {
  state = { sortBy: "firstname"}
  handleChange = (event) => this.setState(
    {sortBy: event.target.value}
  );
  render () {
    const {data} = this.props; 
    const {sortBy} = this.state;
    const sortedData = data.sort((a,b) => a[sortBy]>b[sortBy]?1:-1)
    return <div>
      Sort by  
      <select value={sortBy} onChange={this.handleChange}>
        <option value="firstname">First Name</option>
        <option value="lastname">Last Name</option>
      </select>
      <h2>The table: </h2>
      <TableComponent tableData={sortedData} />
    </div>
  }
}
  
ReactDOM.render(
  <App data={data} />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

关于javascript - 带有 Material-UI 的 ReactJS : How to sort an array of Material-UI's <TableRow> alphabetically?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40541710/

Material-UIMaterialcodegtltjavascriptarraysreactjs

有关javascript - 带有 Material-UI 的 ReactJS : How to sort an array of Material-UI's <TableRow> alphabetically?的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

    我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

  3. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby - 在 jRuby 中使用 'fork' 生成进程的替代方案？ - 2

    在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',

  6. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  7. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  8. ruby-on-rails - 新 Rails 项目 : 'bundle install' can't install rails in gemfile - 2

    我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="

  9. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  10. ruby-on-rails - Rails 中的 NoMethodError::MailersController#preview undefined method `activation_token=' for nil:NilClass - 2

    似乎无法为此找到有效的答案。我正在阅读Rails教程的第10章第10.1.2节，但似乎无法使邮件程序预览正常工作。我发现处理错误的所有答案都与教程的不同部分相关，我假设我犯的错误正盯着我的脸。我已经完成并将教程中的代码复制/粘贴到相关文件中，但到目前为止，我还看不出我输入的内容与教程中的内容有什么区别。到目前为止，建议是在函数定义中添加或删除参数user，但这并没有解决问题。触发错误的url是http://localhost:3000/rails/mailers/user_mailer/account_activation.http://localhost:3000/rails/mai

随机推荐