反応ブートストラップテーブル内のテーブルセルを選択

Question

export class UsersTable extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     info: null 
    }; 
} 

componentWillMount() { 
      fetch("http://localhost:8081/milltime/getUsers") 
     .then(res => res.json()) 
     .then(info => { 
      this.setInfo(info); 
     }); 
} 

setInfo(info) { 
    const state = this.state; 
    state['info'] = info; 
    this.setState(state); 
} 


render() { 
     const info = this.state.info; 
    if (!this.state.info) { 
     return null; 
    } 

    let listItems = []; 
    for (var i = 0; i < info['mta:getUsersResponse']['mta:users'].length; i++) { 
     listItems.push(
      <tr> 
       <td>{info['mta:getUsersResponse']['mta:users'][i]['mta:UserId']}</td> 
       <td>{info['mta:getUsersResponse']['mta:users'][i]['mta:FullName']}</td> 
       <td>{info['mta:getUsersResponse']['mta:users'][i]['mta:CostHour']}</td> 

      </tr>); 
    } 

    return(
<div className="usersTable"> 
    <Table striped bordered condensed responsive hover> 
    <thead> 
     <tr> 
     <th>Id</th> 
     <th>Full Name</th> 
     <th>Hour cost</th> 
     </tr> 
    </thead> 
     <tbody> 
     {listItems} 
     </tbody> 
    </Table> 
</div> 
); 
} 
    } 

これは、ユーザーを取得し、3列のデータを表示するためのコードです。私が問題を抱えているのは、テーブルを選択し、そのテーブルを選択してそのセル内のデータを取得し、選択したセル内のユーザーのIDを使って検索することです。誰かがきちんとした解決策を持っていますか？私はリアクションブートストラップを使用しています。

Answer 1

行の作成時にonClickハンドラをバインドします。 コードのコメントを参照してください。記載されているようにをcomponentDidMountライフサイクルイベントで処理されなければならない

https://reactjs.org/docs/handling-events.html

export class UsersTable extends React.Component { 

     constructor() { 
     super(); 
     this.state = { 
      info: null 
     }; 
    } 

    componentWillMount() { 
     fetch("http://localhost:8081/milltime/getUsers") 
      .then(res => res.json()) 
      .then(info => { 
       this.setInfo(info); 
      }); 
    } 

    setInfo(info) { 
     const state = this.state; 
     state['info'] = info; 
     this.setState(state); 
    } 

    onSelectedRow(user, clickEvent){ 
     //your user object and the click event 
     //clickEvent.currentTarget = the cell clicked 
    } 

    render() { 
     const info = this.state.info; 
     if (!this.state.info) { 
      return null; 
     } 

     let listItems = []; 
     for (var i = 0; i < info['mta:getUsersResponse']['mta:users'].length; i++) { 
      const user = info['mta:getUsersResponse']['mta:users'][i]; //dryer 
      //Bind you onclick handler to the context and you user object (or id if thats what you want) 
      listItems.push(
       <tr onClick={this.onSelectedRow.bind(this, user)}> 
        <td>{user['mta:UserId']}</td> 
        <td>{user['mta:FullName']}</td> 
        <td>{user['mta:CostHour']}</td> 
       </tr>); 
     } 

     return(
    <div className="usersTable"> 
     <Table striped bordered condensed responsive hover> 
     <thead> 
      <tr> 
      <th>Id</th> 
      <th>Full Name</th> 
      <th>Hour cost</th> 
      </tr> 
     </thead> 
      <tbody> 
      {listItems} 
      </tbody> 
     </Table> 
    </div> 
    ); 
    } 
    } 

Answer 2

APIリクエストは、docsを反応させます。

また、お客様の状態はsetInfoに変更されていますが、これは良い方法ではありません。あなたは直接のようなあなたの状態を更新することができます。将来的にあなたのAPI変更する必要があり、あなたがつもりです

setInfo(info) { 
    this.setState({ 
    info, 
    }) 
} 

オブジェクトの速記を使用して

setInfo(info) { 
    this.setState({ 
    info: info, 
    }) 
} 

または単にあなたのコード内のすべてのmta:**を交換する問題を抱えています。あなたはどうして彼らの状態でmap？

this.setState({ 
    info: { 
    users: info['mta:getUsersResponse']['mta:users'].map(user => ({ 
     id: user['mta:UserId'], 
     fullName: user['mta:FullName'], 
     costHour: user['mta:CostHour'], 
    })) 
    } 
}) 

クリック取り扱いはちょうど、UserRowコンポーネントを作成する小道具としてuserを送信し、onClickに変更を伝播し、今から容易になります。

const UserRow = ({ user, onClick }) => 
    <tr onClick={onClick}> 
    <td>{user.id}</td> 
    <td>{user.fullName}</td> 
    <td>{user.costHour}</td> 
    </tr> 

今、あなたはあなたのmap状態けれども、それに小道具を伝播させることができます：​​上

const UserRow = ({ user, onClick }) => 
 
    <tr onClick={onClick}> 
 
    <td>{user.id}</td> 
 
    <td>{user.fullName}</td> 
 
    <td>{user.costHour}</td> 
 
    </tr> 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super() 
 

 
    this.state = { 
 
     info: { 
 
     users: [ 
 
      { id: 0, fullName: 'User 1', costHour: 100 }, 
 
      { id: 1, fullName: 'User 2', costHour: 50 }, 
 
      { id: 2, fullName: 'User 3', costHour: 150 } 
 
     ] 
 
     } 
 
    } 
 

 
    this.handleUserClick = this.handleUserClick.bind(this) 
 
    } 
 

 
    handleUserClick(user) { 
 
    console.log(`user ${user.id} has been clicked`) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="usersTable"> 
 
     <table striped bordered condensed responsive hover> 
 
     <thead> 
 
      <tr> 
 
      <th>Id</th> 
 
      <th>Full Name</th> 
 
      <th>Hour cost</th> 
 
      </tr> 
 
     </thead> 
 
      <tbody> 
 
      {this.state.info.users.map(user => 
 
       <UserRow 
 
       key={user.id} 
 
       user={user} 
 
       onClick={this.handleUserClick.bind(this, user)} 
 
       /> 
 
      )} 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('root') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>