Question

我正在尝试学习React并使用React Semantic UI。我有一张桌子，我无法弄清楚如何从中获取数据。我想在点击复选框时获取用户的ID，但我找不到任何如何操作的例子（也许这只是一个超级基本的问题而且我忽略了一些东西）。我试图最初点击行上的数据，表格就像这样

    <Table collapsing compact celled definition>
     <Table.Header>
       <Table.Row>
         <Table.HeaderCell />
         <Table.HeaderCell>First Name</Table.HeaderCell>
         <Table.HeaderCell>Last Name</Table.HeaderCell>
       </Table.Row>
     </Table.Header>

     <Table.Body>
       {students.map(student => <Table.Row key={student.student_id} onClick = {handleRowClick}>
         <Table.Cell collapsing>
           <Checkbox />
         </Table.Cell>
         <Table.Cell
           children = {student.fname}>
         </Table.Cell>
         <Table.Cell
           children = {student.lname}>
         </Table.Cell>
       </Table.Row>)}
     </Table.Body>
    </Table>

行点击功能是我挥舞的地方。我尝试了各种各样的东西，但我通常只是未定义。

      handleRowClick = (student) => {console.log(this.props.children);}

我发现这个问题似乎相同（How to get data from table row click using Semantic's React Table Component），但我无法让它工作

Answer 1

使用bind可以相当轻松地完成此操作。来自MDN：

bind（）方法创建一个新函数，当被调用时，它具有它此关键字设置为提供的值，具有给定的序列调用新函数时提供的任何参数。

在地图功能中，您可以访问student，因此您可以将其绑定到onClick功能，如下所示：

{students.map(
    student => <Table.Row onClick={handleRowClick.bind(this, student)}/>
)}

然后您可以访问student作为您的函数的第一个参数：

handleRowClick = (student) => console.log(student)

如果您需要，student之后将填写任何其他参数。

如何使用Semantic UI React从表中获取数据

1 个答案: