ReactJS + Material-UI：如何在每个 TableRow 中使用 Material-UI 的 FlatButton 和 Dialog？答案

【问题标题】：ReactJS + Material-UI: How to use Material-UI’s FlatButton and Dialog in each TableRow?ReactJS + Material-UI：如何在每个 TableRow 中使用 Material-UI 的 FlatButton 和 Dialog？
【发布时间】：2017-06-02 08:54:35
【问题描述】：

我有一个 Material-UI 的<Table>，并且在每个<TableRow>（动态渲染）中为<TableBody>，我想为其中一列设置一个按钮（<FlatButton>）。一旦点击按钮，它会打开一个<Dialog>，在里面会有一个工作的<Tabs>。

那么，如何为特定列的每一行显示<FlatButton>，并在单击按钮时，在内部显示<Dialog> 以及工作中的<Tabs> 作为内容？并在外部单击时关闭<Dialog>？

到目前为止，我有以下问题，但遇到了以下问题：打开但速度很慢，在 <Dialog> 之外单击并没有关闭它，<Tabs> 可见但不起作用：

主表：

import React, { Component } from 'react'
import {
  Subheader,
  Table,
  TableBody,
  TableHeader,
  TableHeaderColumn,
  TableRow,
} from 'material-ui'

import RenderedTableRow from ‘./RenderedTableRow'

export default class MainTable extends Component {
  constructor() {
    super()
  }

  render() {

    return (
      <div>
        <div>
        <Subheader>Table</Subheader>
          <Table
            multiSelectable={true}
          >
            <TableHeader
              displaySelectAll={true}
              enableSelectAll={true}
            >
              <TableRow>
                <TableHeaderColumn>
                  Col 1
                </TableHeaderColumn>
                <TableHeaderColumn>
                  Col 2
                </TableHeaderColumn>
                <TableHeaderColumn>
                  Col 3
                </TableHeaderColumn>
              </TableRow>
            </TableHeader>
            <TableBody
              deselectOnClickaway={false}
              stripedRows
           >
              <RenderedTableRow {...this.props}/>
            </TableBody>
          </Table>
        </div>
      </div>
    )
  }
}

渲染的表格行：

import React, { Component } from 'react'

import { Dialog, FlatButton, Tabs, Tab,  TableRow, TableRowColumn } from 'material-ui'
import ContentAdd from 'material-ui/svg-icons/content/add';

export default class RenderedTableRow extends Component {
  constructor(props) {
    super(props)

    this.state = {
      open: false,
    }

    this._handleOpen = this._handleOpen.bind(this)
    this._handleClose = this._handleClose.bind(this)
  }

  _handleOpen() {
    this.setState({
      open: true
    })
  }

  _handleClose() {
    this.setState({
      open: false
    })
  }

  render() {
    const {
      children,
      ...rest
    } = this.props

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this._handleClose}
      />,
    ]

    return (
      <TableRow {...rest}>
        {children[0]}
        <TableRowColumn>Red</TableRowColumn>
        <TableRowColumn>John, Joshua</TableRowColumn>
        <TableRowColumn>
          <FlatButton
            icon={<ContentAdd/>}
            onClick={this._handleOpen}
          />
        </TableRowColumn>

        <Dialog
          actions={actions}
          autoScrollBodyContent={true}
          open={this.state.open}
          onRequestClose={this._handleClose}
          modal={false}
          title='Test'
        >
            <Tabs>
              <Tab label="Item One" >
                <div>
                  <h2 >Tab One</h2>
                  <p>
                    This is an example tab.
                  </p>
                </div>
              </Tab>

              <Tab label="Item Two" >
                <div>
                  <h2>Tab Two</h2>
                  <p>
                    This is another example tab.
                  </p>
                </div>
              </Tab>

            </Tabs>
        </Dialog>
      </TableRow>
    )
  }
}

提前感谢您，我们会接受/支持答案。

【问题讨论】：

对话框中会显示什么？对于每一行，您正在生成一个新对话框 - 是否有必要？正如你提到的，它会很慢。更好的方法是在主表格组件中有一个 Dialog 元素并传递必要的道具。
我会将对话框移到表格之外，将回调传递给表格行中的按钮，单击该按钮，打开对话框并将所选行传递给它
@szymonm 每行内容不同，但会在对话框中使用<Tabs> 显示，但目前选项卡不起作用。我对每一行都这样做的原因是因为每一行的每个对话框都以不同的方式表示。我怎样才能解决这个问题？
@Mateusz 您介意显示作为澄清的答案吗？所以我也可以接受并投票。
@philippspo 更新了他的答案，这正是您所需要的 ;-)

标签： javascript html reactjs react-jsx material-ui

【解决方案1】：

您的MainTable 组件中的整个表格应该只有一个对话框。这更有效，因为您不需要每行一个对话框，而只需要一个对话框。

为了让RenderedTableRow 中的按钮打开模式并告诉它选择了哪一行，您需要将一个回调函数从MainTable 传递给RenderedTableRow，当调用该函数时，设置要打开的对话框并存储选择了哪一行：

export default class MainTable extends Component {
  state = {
    selectedRow: null,
  }
  handleSelectRow(rowIndex) {
    this.setState({
      selectedRow: rowIndex,
    })
  }
  render() {

    return (
      <div>
        <div>
          <Subheader>Table</Subheader>
          <Table
            multiSelectable={true}
          >
            // ...
            <TableBody
              deselectOnClickaway={false}
              stripedRows
              >
              {rows.map((row, index) => (
                <RenderedTableRow
                  row={row}
                  {...this.props}
                  onSelectRow={() => this.handleSelectRow(index)}
                  />
              ))}
            </TableBody>
          </Table>
        </div>
        // Dialog goes here and is only rendered once per table
        // it is only open when there is a row selected
        <Dialog
          open={Boolean(this.state.selectedRow)}
        >
          // you can get the selected row with rows[this.state.selectedRow]
        </Dialog>
      </div>
    )
  }
}

【讨论】：

为了有动态多行，我将用一个数组填充表格，其中每一行都有特定的属性，如下所示：<TableBody>{array.map(row => {return(<RenderedTableRow/>)})};</TableBody>。如果是这种情况，我将如何区分单击了哪一行并在单击的特定行的对话框中显示该特定内容？因为每一行都会在一个对话框中显示不同的内容。还有为什么<Tabs> 不起作用？
我扩展了代码示例以包含多行。不知道为什么Tabs 不起作用。他们在我看来很好。我什至尝试了你的Dialog 代码和Tabs 为我工作。
你介意用 codepen 或类似的东西来展示它吗？似乎没有工作.. :(
刚刚签到看看你是否看过我之前的评论。请告诉我。

【解决方案2】：

下面是一个工作示例，它应该直接通过复制意大利面工作。

您的问题的答案是您需要能够区分不同的rows，将其设置为true 将显示所有对话框，或者可能只显示最后一个。一旦你区分它，显示你想要的dialog 应该不是问题。有很多方法可以只拥有一个 dialog 并且仍然可以进行这项工作，但我会让你弄清楚。

需要注意的是，您绝对可以清理此代码。为创建 TableRows TableColumns 等创建单独的文件。

我现在把它放在两列，但是你应该能够理解代码。如有任何其他问题，请随时提出。

import React, { Component } from 'react'

import { Dialog, FlatButton, Tabs, Tab,  TableRow, TableRowColumn } from 'material-ui'
import ContentAdd from 'material-ui/svg-icons/content/add';

class MainTable extends Component {
  static fields = [{tab1:"a", tab2:"b"}, {tab1:"c", tab2:"d"}];

  state = {
    open: false,
  }

  handleOpen = (field) => () => {
    this.setState({
      open: field
    })
  }

  handleClose = () => {
    this.setState({
      open: false
    })
  }

  renderRows = (field) => {
    const { open } = this.state;

    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onTouchTap={this.handleClose}
      />,
    ];

    return (<TableRow key={field.tab1}>
      <TableRowColumn>{field.tab1}</TableRowColumn>
        <TableRowColumn>
        <FlatButton
        icon={<ContentAdd/>}
        onClick={this.handleOpen(field.tab1)}
      />
      </TableRowColumn>
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={open === field.tab1}
          onRequestClose={this.handleClose}
        >
        <Tabs>
          <Tab label={field.tab1} >
            <div>
              <h2>{field.tab1}</h2>
              <p>
                This is one tab.
              </p>
            </div>
          </Tab>

          <Tab label={field.tab2}>
            <div>
              <h2>{field.tab2}</h2>
              <p>
                This is another example tab.
              </p>
            </div>
          </Tab>
        </Tabs>
      </Dialog>
    </TableRow>);
  }

  render() {
    const rows = MainTable.fields.map(this.renderRows);
    return (
      <div>
        {rows}
      </div>
    )
  }
}

export default MainTable;

【讨论】：

为了有动态多行，我将用一个数组填充表格，其中每一行都有特定的属性，如下所示：{array.map(row => {return()})};.如果是这种情况，我将如何区分单击了哪一行并在单击的特定行的对话框中显示该特定内容？因为每一行都会在一个对话框中显示不同的内容。另外为什么不起作用？如果你能展示一个实际工作的，那真的很有帮助。
我现在正在工作，但我会在今晚晚些时候更新答案以显示工作 tabs。我把那部分省略了。
顺便说一句，你试过上面的代码吗？单击不同的rows 会显示不同类型的数据。我唯一没有研究的是tabs，我不确定他们是做什么的，但我可以稍后查看文档。
给你@JoKo。这是一个带有标签的完整工作示例。希望对您有所帮助。

【解决方案3】：

正如我之前在 cmets 中提到的，您应该只有一个 Dialog 元素和表格组件。在每一行中嵌入Dialog 会影响性能，通常是一种不好的做法。这是模拟标签的解决方案：

import React, { Component } from 'react';
import { find } from 'lodash';
import { Dialog, FlatButton, Tabs, Tab, TableRow, TableRowColumn } from 'material-ui';
import ContentAdd from 'material-ui/svg-icons/content/add';

class MainTable extends Component {
  // mocked data to show you the example:
  static fields = [{
    id: 1,
    name: 'John',
    tabs: [{
      header: 'Tab 1 John',
      content: 'Content of tab 1 for John'
    }, {
      header: 'Tab 2 John',
      content: 'Content of tab 2 for John'
    }]
  }, {
    id: 2,
    name: 'George',
    tabs: [{
      header: 'Tab 1 George',
      content: 'Content of tab 1 for George'
    }, {
      header: 'Tab 2 George',
      content: 'Content of tab 2 for George'
    }]
  }];

  state = {
    activeRowId: null  // we will store the `id` of the active row (opened dialog)
  };

  handleOpen = (rowId) => () => {
    this.setState({
      activeRowId: rowId  // set `id` taken from the row
    });
  };

  handleClose = () => {
    this.setState({
      activeRowId: null  // reset active `id`
    });
  };

  renderRows = (field) => (
    <TableRow key={`row-${field.id}`}>
      <TableRowColumn>{field.name}</TableRowColumn>
      <TableRowColumn>
        <FlatButton
          icon={<ContentAdd />}
          onClick={this.handleOpen(field.id)}
        />
      </TableRowColumn>
    </TableRow>
  );

  render() {
    const rows = MainTable.fields.map(this.renderRows);
    const { activeRowId } = this.state;
    const actions = [
      <FlatButton
        label="Cancel"
        primary
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary
        keyboardFocused
        onTouchTap={this.handleClose}
      />,
    ];
    const activeRow = find(MainTable.fields, { id: activeRowId }); // find the data for this active row `id`
    return (
      <div>
        {rows}
        {activeRow ? (
          <Dialog
            title="Dialog title"
            actions={actions}
            modal={false}
            open
            onRequestClose={this.handleClose}
          >
            <Tabs>
              {activeRow.tabs.map((tab, index) => (
                <Tab label={tab.header} key={`tab-${index}`}>
                  <div>
                    <h2>{tab.header}</h2>
                    <p>{tab.content}</p>
                  </div>
                </Tab>
              ))}
            </Tabs>
          </Dialog>
        ) : null}
      </div>
    );
  }
}

export default MainTable;

现在是这样工作的：

几点说明：

您应该将此代码拆分为更小的组件，我将其全部编写在一个组件中以便于测试，
记得在列表的所有元素中使用 key 属性（迭代列表的位置） - 行和选项卡（您的问题中缺少 key）。

【讨论】：