reactjs - 在分页反应表中选择行问题

Question

我制作了一个表格，其中有一列作为复选框来选择该行。因此，如果用户选中该行的复选框，我将isChecked : true在状态中添加属性，取消选中将更改状态中的属性isChecked: false。每页有 10 行。问题是当我检查了第一页的第一行复选框时，当我以Next Page某种方式转到下一页的第一行复选框时，也出现了选中状态。然而，只有第一行在 state 中设置为 true。什么问题？我做错了什么谁能告诉我？提前致谢！

import React,{Component} from 'react';
import { Table,Button,Input } from 'reactstrap';
import SelectedUsers from './SelectedUsers';
import { yellow } from '@material-ui/core/colors';
import Icon from '@material-ui/core/Icon';

class Users extends Component {
    constructor(props) {
    super(props);

    this.state = { 
        users : [],
        pageSize: 10,
        pageIndex: 0,
        selectedUsers : [],
        filterCandidate : '',
        searchVal : ""
     };
}
componentDidMount() {
    const userLink = 'api';
    fetch(userLink, {
        method: 'GET'
    })
    .then(res => res.json())
    .then(data => {
        this.setState({
            users : data
        })
        console.log(data)
    })
}
onSelectUser = (e,i) => {
    const copy_users = this.state.users.slice() ;
    const checked = e.target.checked
    copy_users[i].isChecked = checked
    this.setState({ copy_users})

    // console.log( e.target.value)
}


handlePrevPageClick = (event) => {
    this.setState(prevState => ({
      pageIndex: prevState.pageIndex > 0 ? prevState.pageIndex - 1 : 0
    }));
}

handleNextPageClick = (event) => {
    this.setState(prevState => ({
      pageIndex:
        prevState.pageIndex <
        Math.floor(prevState.users.length / prevState.pageSize)
          ? prevState.pageIndex + 1
          : prevState.pageIndex
    }));
}
render() {
    let profile = 'Profile Image';
    return (
        <div className="bets_page">
            <Table striped responsive>
                    <thead>
                        <tr>
                        <th>Select</th>
                        <th>Player Name</th>
                        <th>Level<Icon style={{ color: yellow[800] }} fontSize="small">star</Icon></th>
                        <th>Avatar</th>
                        <th>BET</th>
                        <th>Wins<Icon style={{ color: yellow[800] }} fontSize="small">euro</Icon></th>
                        <th>Lost</th>
                        <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>
                    {this.state.users.slice(
                            this.state.pageIndex * this.state.pageSize,
                            this.state.pageIndex * this.state.pageSize + this.state.pageSize
                        ).map((data,i) => (
                            <tr key={i}>
                                <td>
                                    
                                        <label className="checkbox">
                                            <input type="checkbox" 
                                            checked={data.isChecked} 
                                            key={i} 
                                            value={data.Name}
                                            onChange={(e) => this.onSelectUser(e,i)}/>
                                        </label>
                                   
                                </td>
                                <td>{data.Name}</td>
                                <td></td>
                                <td><img src={data[profile]} alt={data.Name} 
                                className="avatar"/></td>
                                <td>{data.Bet}</td>
                                <td></td>
                                <td></td>
                                <td>{data.Price}</td>

                            </tr>
                    
                    ))}
           </tbody>
          </Table>
       <div>
                    <Button onClick={event => this.handlePrevPageClick(event)} className="m-2">
                    {"<"}
                    </Button>Page {this.state.pageIndex+1}
                    <Button onClick={event => this.handleNextPageClick(event)} className="m-2">
                    {">"}
                    </Button>
                </div>
        </div>

    }
  }

 export default Users;

标签： reactjs

Answer 1

当您对用户进行切片并在他们上应用地图时，每个页面的“i”变量从 0 开始。你应该将'this.state.pageIndex * this.state.pageSize'添加到'i'变量，只要你将它设置为key并将它发送给onSelectUser

render() {
    return (
      <div className="bets_page">
        <Table striped responsive>
          <thead>
            <tr>
              <th>Select</th>
              <th>Player Name</th>
            </tr>
          </thead>
          <tbody>
            {this.state.users
              .slice(
                this.state.pageIndex * this.state.pageSize,
                this.state.pageIndex * this.state.pageSize + this.state.pageSize
              )
              .map((data, i) => {
                const index = i + this.state.pageIndex * this.state.pageSize;
                return (
                  <tr key={index}>
                    <td>
                      <label className="checkbox">
                        <input
                          type="checkbox"
                          checked={data.isChecked}
                          key={i}
                          value={data.Name}
                          onChange={(e) => this.onSelectUser(e, index)}
                        />
                      </label>
                    </td>
                    <td>{data.Name}</td>
                  </tr>
                );
              })}
          </tbody>
        </Table>
        <div>
          <Button
            onClick={(event) => this.handlePrevPageClick(event)}
            className="m-2"
          >
            {"<"}
          </Button>
          Page {this.state.pageIndex + 1}
          <Button
            onClick={(event) => this.handleNextPageClick(event)}
            className="m-2"
          >
            {">"}
          </Button>
        </div>
      </div>
    );
  }

我简化了您的代码，并在此处创建了在线演示