如何使用Semantic的React Table Component从表行中获取数据

时间:2017-09-14 16:13:44

标签: reactjs semantic-ui semantic-ui-react

我试图从使用Seact UI和React渲染的表中获取点击值。我使用不可变列表生成我的行,我想要一个onclick,可以访问唯一的id值。当我记录我在回调中提取值的尝试时,我得到:

'bff3a3e9-489e-0e19-c27b-84c10db2432b'包裹在td标签中

相关代码:

  handleRowClick = (scen) => {
    console.log(Object.keys(scen.target));
    console.log(scen.target.);
  }

  mapScenarios = () => {
      return ((scen, i) => {
        return(
          <Table.Row key = {scen.get('id')} onClick = {this.handleRowClick}>
            <Table.Cell
              children={scen.get('id') || '(No ID)'}
            />
            <Table.Cell
              children={scen.get('name') || '(No Name)'}
            />
            <Table.Cell
              children={scen.get('actions').size === 0 ? 'none' : `${scen.get('actions').size} action(s)`}
            />
          </Table.Row>
        )
      })
  }

2 个答案:

答案 0 :(得分:1)

这是我如何使该行作为React-Router链接工作的方式:

const RowClickable = React.forwardRef((props, ref) => (
    <Table.Row ref={ref} onClick={props.navigate}>{props.children}</Table.Row>
))

const RowItem = ({id, name}) => (
    <Link to={`/item/${id}/`} component={RowClickable}>
        <Table.Cell>
            <Header as="h4">{name}</Header>
        </Table.Cell>
    </Link>
)

答案 1 :(得分:0)

使用语义ui进行反应,行点击效果不佳。在行上点击你实际上从那一行获得CELL的值,这不是我想要的,但我认为它有效,因为我点击了包含Id的单元格。这是解决方法。

  <Table.Row key = {scen.get('id')} onClick={() => this.props.tableRowClickFunc(scen.get('id'))}>