2017-11-09 44 views
1

React Semantic UIを使ってReactとReact Semantic UIを学習しようとしています。私はテーブルを持っています、そして、私はそれからデータを取得する方法を理解できません。チェックボックスがクリックされたときにユーザーのIDを取得したいのですが、どのように行うかの例は見つかりません(多分これは基本的な質問ですが、何かを見落としています)。私が最初の行のクリックでデータを取得しようとした、表には、このSemantic UI Reactを使用してテーブルからデータを取り出す方法React

<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)を見つけたが、私はそれはあなたがbindを使って比較的簡単にこれを行うことができます

答えて

1

動作させることはできません。 MDNから:

新しい関数が呼び出されたときに提供されるバインド()メソッドが呼び出され、新たな機能を作成し、その このキーワードは、任意の先行 引数の指定された配列と、与えられた値に設定されています。マップ機能で

、あなたはstudentへのアクセス権を持っているので、あなたは、このようなあなたのonClick機能にバインドすることができます

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

次に、あなたの関数の最初のパラメータとしてstudentにアクセスできます。

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

その他のパラメータは、必要に応じてstudentの後に入力します。

+0

これは私が必要としていたものです。ありがとうございました! – fwhang

関連する問題