代码之家  ›  专栏  ›  技术社区  ›  brohymn

检索表中选定的行值作为数组,并在React时将结果发送给另一个函数

  •  1
  • brohymn  · 技术社区  · 7 年前

    我如何控制台记录表组件上显示的选定值,然后存储我的选择并将其传递给第二个函数?

    我有一个表显示来自API的数据,该表的每一行上都有复选框。我正在使用<表/>React的物料UI组件。

    根据文档,onRowSelection(类似于onClick)属性应该给我一个所选行的数组(仅索引),例如,如果我选择第一行,控制台将打印[0],如果我选择第一行和第五行,控制台将打印[0,4]

    现在,提供给表的数据来自我的状态,这是来自我的API的数据 这状态数据表=响应。数据

    所以它看起来像是通过这个循环的。状态dataTable,并且不考虑正在激发的事件。我做错了什么?

    在onRowSelection内部的函数中,我做了以下操作:

       handleRowSelection (i) {
    
           for (let x = 0, len = i.length; x < len; x++) {
             i = this.state.dataTable[x];
             console.log(i);
           }
       }
    

    我最初认为它给出了正确的值。当我单击第一个复选框(行)时,它给出了第一行元素的值,但当我单击第六个复选框时,它给出了第二行元素的值,第七个复选框=第三个元素,依此类推。

    我也试过这个

    handleRowSelection (row) {
    
        const selectedRows = []
        this.state.dataTable.forEach((row, i) => {
        row = row.indexOf(i) > -1
    
        selectedRows.push(row)
    }
        console.log(selectedRows)
    

    这给了我一个有趣的值,比如:【false,false,false, 真的 真的 ]

    不用说 真的 值表示我选中的复选框

    代码(跳到类的开头)

        import ...
        import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, 
        TableRowColumn} from "material-ui/Table";
    
        const REAL_URL = `//xx.xx.xx.xx/getData/`;
    
        const markers = [
          {
            key: "Q123456789",
            position: [37.786464, -122.411047],
            children: "My first popup"
          },
          {
            key: "P234567890",
            position: [40.689192, -74.044563],
            children: "My second popup"
          }
        ];
    
    
        const MyPopupMarker = ({ children, position, index, handleToggle }) => (
          <Marker onClick={() => handleToggle(index)} position={position}>
            <Popup>
              <span>{children}</span>
            </Popup>
          </Marker>
        );
    
        const MarkerList = ({ markers, handleToggle }) => {
          const items = markers.map(({ key, ...props }, i) => (
            <MyPopupMarker key={key} {...props} index={i} handleToggle={handleToggle} />
          ));
          return <div>{items}</div>;
        };
    
          // var holdArray = []
    
        class Mapper extends Component {
          constructor(props) {
            super(props);
    
            this.handleToggle = this.handleToggle.bind(this);
            this.handleRowSelection = this.handleRowSelection.bind(this);
            this.handleClose = this.handleClose.bind(this);
            this.handleDeploy = this.handleDeploy.bind(this);
    
            this.state = {
              lat: 29.761993,
              lng: -95.366302,
              zoom: 4,
              open: false,
              places: [],
              selectedMarker: null,
              selectable: true,
              multiSelectable: true,
              enableSelectAll: true,
              dataTable: [],
              selectedRows: []
            };
          }
    
          componentDidMount() {
            this.setState({
              places: markers
            });
          }
    
          handleToggle(index) {
            const self = this;
            const selectedMarker = this.state.places[index];
    
            this.setState({
              open: !this.state.open,
              selectedMarker: selectedMarker
            });
    
            const LAST_URL = REAL_URL + this.state.selectedMarker.key;
    
            axios
              .get(LAST_URL)
              .then(response => {
                self.setState({
                  dataTable: response.data
                });
    
                console.log(response.data);
              })
              .catch(function(error) {
                console.log(error);
              });
          }
    
          handleRowSelection (i) {
    
              for (let x = 0, len = i.length; x < len; x++) {
                i = this.state.dataTable[x];
                console.log(i);
              }
          }
    
    
          handleDeploy () {
    
            let resultObject = {
              "devices": this.state.selectedMarker.key,
              // "app": this.handleRowSelection()
            }
            // console.log(resultObject)
    
          }
    
      render() {
        const center = [this.state.lat, this.state.lng];
        const selectedMarker = this.state.selectedMarker;
    
        let availableRows = this.state.dataTable.map((row, k)=>{
          return (
            <TableRow key={k} selected={row.selected}>
              <TableRowColumn>{row}</TableRowColumn>
              <TableRowColumn>Unknown</TableRowColumn>
            </TableRow>
          )
        });
    
    
        return (
          <div>
            <Map center={center}
              zoom={this.state.zoom}
              minZoom={3}
              style={styles.map}>
    
              <TileLayer
                url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
                attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
              />
    
              <MarkerList markers={markers} handleToggle={this.handleToggle} />
            </Map>
    
            <Drawer
              width={500}
              openSecondary={true}
              docked={false}
              open={this.state.open}
              onRequestChange={open => this.setState({ open })}
              containerStyle={styles.whitebox}
            >
              {
                selectedMarker ? (
                <div>
                  <Card style={styles.appMedia}>
                    <CardTitle
                      titleStyle={styles.drawTitle}
                      subtitleStyle={styles.drawTitle}
                      title={selectedMarker.key}
                      subtitle="Common Field Equipment"
                    />
                  </Card>
    
                  <Table
                    selectable={this.state.selectable}
                    multiSelectable={this.state.enableSelectAll}
                    onRowSelection={(selectedApps) => this.handleRowSelection(selectedApps, this.props)}
                  >
    
                    <TableHeader
                      enableSelectAll={this.state.enableSelectAll}
                      displaySelectAll={false}
                    >
    
                      <TableRow>
                        <TableHeaderColumn>Applications</TableHeaderColumn>
                        <TableHeaderColumn>Status</TableHeaderColumn>
                      </TableRow>
    
                    </TableHeader>
    
    
                    <TableBody
                      deselectOnClickaway={this.state.clickAway}
                      showRowHover={true}
                    >
                      {availableRows}
    
                    </TableBody>
    
                  </Table>
    
                  <RaisedButton
                    label="START SELECTED"
                    onClick={this.handleDeploy}
                    style={styles.buttonStl}
                    labelPosition="before"
                    backgroundColor="#363636"
                    labelStyle={styles.labelStl}
                    icon={<BeenHere />}
                  />
    
                  <RaisedButton
                    label="STOP SELECTED"
                    style={styles.buttonStl}
                    labelPosition="before"
                    backgroundColor="#FF0000"
                    labelStyle={styles.labelStl}
                    icon={<Cancel />}
                  />
                </div>
              ) : null
            }
            </Drawer>
          </div>
        );
      }
    }
    export default Mapper;
    

    链接到组件 http://www.material-ui.com/#/components/table

    1 回复  |  直到 5 年前
        1
  •  1
  •   Rick Jolly    7 年前

    在你的2 handleRowSelection 例如,您要么重新定义变量,要么不使用传入的变量。这应该有效:

    handleRowSelection (indexes) {
        const selectedRows = indexes.map(x => this.state.dataTable[x]);
    }
    

    编辑:看起来如果选中了所有行,则 onRowSelection 将返回字符串“all”,因此需要处理:

    handleRowSelection (indexes) {
        const {dataTable} = this.state;
        const selectedRows = (indexes === 'all')
            ? [...dataTable] // copy of the dataTable
            : indexes.map(x => dataTable[x]);
    }  
    

    编辑

    显示用于选中复选框的相关代码:

    constructor(props) {
        // ...
        this.state = {
            // ...
            dataTable: [],
            selectedIndexes: []
        }
    }
    
    handleRowSelection (indexes) {
        this.setState({selectedIndexes: indexes});
    }  
    
    render() {
        //...
        let availableRows = this.state.dataTable.map((row, k) => {
          return (
            <TableRow key={k} selected={this.state.selectedIndexes.indexOf(k) !== -1}>
              <TableRowColumn>{row}</TableRowColumn>
              <TableRowColumn>Unknown</TableRowColumn>
            </TableRow>
          )
        });
        //...
    }