代码之家 › 专栏 › 技术社区 › Tzvetlin Velev

如何使用语义的React表组件从表行单击中获取数据

semantic-ui-react semantic-ui reactjs

Tzvetlin Velev · 技术社区 · 9 年前

“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 回复 | 直到 9 年前

Tzvetlin Velev 9 年前

由于react的语义ui,行单击没有很好地实现。在单击行时,您实际上从该行获得了单元格的值,这不是我想要的,但我认为它有效,因为我正在单击包含Id的单元格。下面是解决方法。

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

Matt Ke Alex Santos 6 年前

这就是我如何将行用作react路由器链接的方式:

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>
)

推荐文章

MachoBoy · 如何使用redux子空间重用具有相同动作的reducer

8 年前

merrilj · Reactjs-在动态元素渲染中向输入添加ref

9 年前

DuckQueen · 如何为react重新创建带有语义ui的自动折叠菜单?

9 年前

Tzvetlin Velev · 如何使用语义的React表组件从表行单击中获取数据

9 年前

DuckQueen · 如何在JavaScript中创建嵌套菜单?

9 年前

Dan · 如何设置语义UI下拉列表大小以匹配按钮等

9 年前

amir · 使用javascript更改图标标记

9 年前

rimraf · 从语义用户界面反应下拉菜单中删除插入符号

9 年前

Tyler Chong · 有没有办法通过语义用户界面获得动态图标?

9 年前

stevenlacerda · 我无法在语义使用react中关闭模式和调光器

9 年前