时间戳

首页 > 解决方案 > React JS + Ant Design 中如何收集 Switch 值

reactjs - React JS + Ant Design 中如何收集 Switch 值

问题描述

我很抱歉我的基本知识和我的基本英语:)

我的问题是：如何连接开关值[我对表中的每条记录使用开关]

这是表格 https://ibb.co/3TVLBK6

我已经使用开关（开/关）创建了一个包含一个单元格/字段的表格，我想在它们打开时获取开关值

这是代码

const columnsTableDepartmentModal = [
{
  title: 'No',
  dataIndex: 'no',
  key: 'no',
}, 
{
  title: 'Department',
  dataIndex: 'department',
  key: 'department',
}, 
{
  title: 'Select',
  dataIndex: 'select_department',
  key: 'select_department',
  render: (e, record) => (
    <Switch 
      defaultChecked={e} 
      onChange={
        (value) => onChangeSwitch(value,record)
      } 

      checkedChildren="Yes"
      unCheckedChildren="No"
      />
  ),
}];

这就是我现在尝试的

function onChangeSwitch(isSelect,record){
  console.log(e); // True / False
  console.log(record); // True / False

  if(isSelect){
    // push data to array
  }

  if(!isSelect){
    // pop data from array

  }
}

这就是我展示表格的方式

<Modal
        title={modalDepartmentTitle}
        visible={visibleDepartment}
        width={800}
        onOk={handleOkDepartment}
        onCancel={handleCancelDepartment}  
        footer={[
          <Button key="submit" type="primary" onClick={handleOkDepartment}>OK</Button>,
          <Button key="button" type="danger" onClick={handleDeleteDepartment}>DELETE</Button>,
          <Button key="back" onClick={handleCancelDepartment}>CANCEL</Button>,
        ]}
      >
        <Table 
          columns={columnsTableDepartmentModal}  
          dataSource={stateDepartment.data} 
          pagination={false} 
          scroll={{y: 325}}
          />
    </Modal>

预期结果：1,3,4

标签： reactjsreact-nativereact-reduxantd

解决方案

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Switch from 'react-switch'; 

class App extends Component {
  constructor() {
    super();
    this.state = {
      checkedPos: [],
      info: [],
    };
  }

  componentWillMount()
  {
     let tmp = []
     let pos = []
     for (var i = 1; i < 6; i++) {
       tmp.push("Info " + i)
       pos.push(false);
     }
     this.setState({
       info: tmp,
       checkedPos: pos
     })
   }

  handleChange(index, info)
  {
    if (!this.state.checkedPos[index])
    {
      this.setState(prev => ({
         checkedPos: prev.checkedPos.map((val, i) => !val && i === index ? true : val),
      }))
    }
    else if (this.state.checkedPos[index])
    {
      this.setState( prev => ({
         checkedPos: prev.checkedPos.map((val, i) => val && i === index ? false : val),
      }))
    }
  }

  render() {
    const listItems = this.state.info.map((item, index) =>
      <div>
        {item}
        <Switch checked={this.state.checkedPos[index]}
          onChange={ () => this.handleChange(index, this.state.info[index])}/>
        {"  Value is " + this.state.checkedPos[index]}
      </div>
    );

    return (
      <div>
        {listItems}
      </div>
    );
  }
}

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

演示在这里

推荐阅读