如何使用语义 UI React 从 table 中获取数据

Question

我正在尝试学习 React 并使用 React Semantic UI。我有一个 table，但我不知道如何从中获取数据。我想在单击复选框时获取用户的 ID，但我找不到任何有关如何执行此操作的示例（也许这只是一个超级基本的问题，我忽略了一些东西）。我试图获取行上的数据 click 最初， table 是这样的

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

我发现这个问题似乎相同 ()，但我无法让它工作

Answer 1

您可以使用 bind 轻松完成此操作。来自 MDN:

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

在您的地图函数中，您可以访问 student，因此您可以像这样将它绑定到您的 onClick 函数：

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

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

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

如有需要，其他参数会在student后面填写。

如何使用语义 UI React 从 table 中获取数据

How can I get the data out of a table using Semantic UI React

reactjs

semantic-ui-react