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。有没有人得到一个简洁的解决方案？我正在使用React bootstrap。

Answer 1

在创建行时绑定onClick处理程序。请参阅代码中的注释。

effectively activated virtualenv

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

应在<{1}}生命周期事件中处理应的Api请求，如React docs中所述。

另外，你正在componentDidMount改变你的状态，这也不是一个好习惯。您可以直接更新您的状态，如：

setInfo

或仅使用对象简写

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

如果您的api将来发生变化，您将无法替换代码中的所有setInfo(info) { this.setState({ 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')
)

在react bootstrap表中选择表格单元格

2 个答案: