5

所以我在一个项目中使用了带有 umi js 和 antd 作为附加依赖项的 react js,

当我得到禁用 antd 表中每一行的任务时,我遇到了问题,

我试图阅读文档 antd 但一无所获,

你能做到吗?或者有另一种可能的方法来做到这一点

感谢您的帮助

这是我的代码:

/* eslint-disable */
import React, { useState, useEffect, useRef } from 'react';
import { Modal, Button, Select, message, Radio, Table, Alert } from 'antd';
import _       from 'lodash';
import axios   from 'axios';
import cookies from 'js-cookie';
import {_getCurrentBusiness} from '../../../utils/utils_business';
import {formatMessage }     from 'umi-plugin-locale';

function DeleteConfirm (props) {

    const user_auth           = cookies.getJSON('ckmsbp');
    const business            = _getCurrentBusiness();
    const [radio, setRadio]   = useState('all');
    const [role, setRole]     = useState(null);
    const [chRole, setChrole] = useState(null); //changerole
    const [btn, setBtn]       = useState(false);
    const isMounted           = useRef(null);
    const roleRef             = useRef(null);
    const spanAmount          = {fontSize: '1rem', fontWeight: 500,marginLeft: '1rem'}

    useEffect( () => {
        isMounted.current = true;
        return () => isMounted.current = false;
    }, [])
    useEffect( () => {
        if(!_.isNil(props.roles)) {
            const updateRole = _.filter(props.roles, r => !_.eq(r.id, props.role.id) );           
            setRole(updateRole); //tampil di select 
        }
    }, [props.roles]);

    const handleSubmit = async () => {
        let   accountMeta = {}
        const body        = {status: 'deleted'}
        const params      = { _id: props.role.id}
        console.log('radio', radio);
        if(_.eq(radio, 'all')){

            if(_.isNil(chRole)) {
                message.error('data can not empty')
                props.chVisible(null); //close modal
            }

            _.forEach(props.account, async acc => {
                let bus = [];
                if( !_.isNil(acc.business) && _.isString(acc.business) ) bus = JSON.parse(acc.business);
                const find = _.findIndex(bus, b => {
                    return _.eq(b._id, business._id) && _.eq(b.role_capability, props.role.id)
                })
                bus[find].role_capability = chRole;
                acc.business = JSON.stringify(bus)
                accountMeta = {
                    value     : acc.business,
                    key       : 'business',
                    account_id: acc._id
                }
                await axios.put(`${API}/account-meta`, accountMeta, { headers: { Authorization: user_auth.token}});
            })

        } else if( _.eq(radio, 'manual')){
            console.log('asd');

        } else if (_.eq(radio, 'delete')){
            _.forEach(props.account, async acc => {
                let bus = [];
                if( !_.isNil(acc.business) && _.isString(acc.business) ) bus = JSON.parse(acc.business);
                const find = _.findIndex(bus, b => _.eq(b._id, business._id) && _.eq(b.role_capability, props.role.id) )
                if(_.gt(find, -1)){
                    acc.business = JSON.stringify([])
                    accountMeta = {
                        value     : acc.business,
                        key       : 'business',
                        account_id: acc._id
                    }
                    await axios.put(`${API}/account-meta`, accountMeta, { headers: { Authorization: user_auth.token}});
                }                
            })
        }
         const deleteResult = await axios.put(`${API}/master`, body, { params, headers: { Authorization: user_auth.token}});
         if(!_.isNil(deleteResult) && _.isObject(deleteResult.data)){
             let no         = 1;
             let data       = []
             let updateRole = _.filter(props.roles, r => !_.eq(r.id, props.role.id));
             _.map(updateRole, role => {
                 role.no = no;
                 data.push(role)
                 no++
             });
             props.data(data); //tampil di select 
             message.success('data updated!')
             props.chVisible(null); //close modal
         }
    }

    const onChange  = (data) => {
        const value = data.target.value
        setRadio(value);
    }

    const roleChange = (data) => {
        setChrole(data)
    }

    //props column diambil dari datasource
    const columns = [
      {
        title    : 'No',
        dataIndex: 'no',
        key      : 'no',
      },
      {
        title    : 'Account\'s Name',
        dataIndex: 'name',
        key      : 'name',
      },
      {
        title    : 'Change Role',
        dataIndex: 'id',
        key      : 'action',
        render : (text, data) => renderButton(text, data) 
      },
    ];

    const handleClick = (e, data) => {
        setBtn(!btn)
        console.log('e', e);
        console.log('data', data);
    }

    const rowClassName = (record, index) => {
        console.log('record', record);
        console.log('index',index);

    }

    const renderButton = () => {
      let arrayAllow = [];
        arrayAllow.push(
          <Select
                showSearch
                key              = '1'
                size             = "small"
                placeholder      = "select"
                ref              = {roleRef}
                optionFilterProp = "children"
                style            = {{ width: 100 }}
                onChange         = {(e) => roleChange(e)} //handle change role
                filterOption     = {(input, option) => _.toLower(option.props.children).indexOf(_.toLower(input)) >= 0}
            >
                {
                    !_.isNil(role) && _.map(role, (newVal) => {
                        return (<Select.Option 
                                    key   = {newVal.id}
                                    title = {newVal.title}
                                    value = {newVal.id}>{newVal.title}
                                </Select.Option>)
                    })
                }
            </Select>
        )
        arrayAllow.push( <Button 
                            type    = {!btn ? "danger" : "primary"}
                            key     = '2'
                            icon    = {!btn ? "close" : "redo"}
                            size    = "small"
                            onClick = {(e) => handleClick(e, props.role.id)}
                         /> )
      return arrayAllow
    }

    // R E N D E R I N G
    return(
      <div>
        <Modal
            title    = {`${formatMessage({id: 'ROLE_MANAGEMENT.DELETE_CONFIRM_TITLE'})} ${props.role.title}`}
            visible  = {props.visible}
            onOk     = {() => handleSubmit()}
            onCancel = {() => props.cancel(null) }
            width    = {800}
        >
          <p>{formatMessage({id : 'ROLE_MANAGEMENT.DELETE_CONFIRM_STATEMENT', title: props.role.title})}</p>
            <div style={{marginBottom: '1rem'}}>
                <Radio.Group onChange = {(e) => onChange(e)} value={radio}>
                    <Radio value="all"   >Changed All of people  </Radio>
                    <Radio value="manual">Changed people manually</Radio>
                    <Radio value="delete">Total delete           </Radio>
                </Radio.Group>
            </div>

          { _.eq(radio, 'all') && 
            <div>
                <Select
                    showSearch
                    ref              = {roleRef}
                    size             = "large"
                    style            = {{ width: 200 }}
                    placeholder      = {formatMessage({id: 'ACCOUNT.PLCHOLDER_ROLE'})}
                    optionFilterProp = "children"
                    onChange         = {(e) => roleChange(e)} //handle change role
                    filterOption     = {(input, option) => _.toLower(option.props.children).indexOf(_.toLower(input)) >= 0}
                >
                    {
                        !_.isNil(role) && _.map(role, (newVal) => { 
                            return ( <Select.Option 
                                        key   = {newVal.id}
                                        title = {newVal.title}
                                        value = {newVal.id}
                                     >{newVal.title}
                                     </Select.Option> )
                        })
                    }
                </Select>
                <span style={spanAmount}>{`Total amount of people which have role ${props.role.title} : ${_.size(props.account)}`}</span>
            </div>
          }

          { _.eq(radio, 'manual') && <Table 
                                        dataSource   = {props.account}
                                        rowClassName = {rowClassName}
                                        columns      = {columns}
                                        pagination   = {{ pageSize: 50 }}
                                        scroll       = {{ y: 250 }}
                                    /> 
          }

          { _.eq(radio, 'delete') && <Alert
              message     = "Attention!"
              description = {formatMessage({id: 'ROLE_MANAGEMENT.DELETE_CONFIRM_DELETE'})}
              type        = "warning"
              showIcon
            />
          } 
        </Modal>
      </div>
    )
}

export default DeleteConfirm;

*点击危险按钮时我打算禁用的图片 在此处输入图像描述

4

1 回答 1

8

在 Antd 中没有简单的方法来禁用一行,所以你可以像下面这样的解决方法来做

因此,基本上当您单击关闭按钮时,您可以将其作为布尔值启用还是禁用

所以每条记录都会有那个键。因此,基于此,您可以添加一个 className 并将其设置为禁用。

这是一个示例代码片段

应用程序.js

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";

import "./styles.css";

function App() {
  const dataSource = [
    {
      key: "1",
      name: "Mike",
      age: 32,
      address: "10 Downing Street",
      enabled: true
    },
    {
      key: "2",
      name: "John",
      age: 42,
      address: "10 Downing Street",
      enabled: false
    }
  ];

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name"
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age"
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address"
    }
  ];
  return (
    <>
      <Table
        dataSource={dataSource}
        columns={columns}
        rowClassName={record => !record.enabled && "disabled-row"}
      />
      ;
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

样式.css

.disabled-row {
  background-color: #dcdcdc;
  pointer-events: none;
}

我希望这样你会更好地理解解决问题

工作代码框

于 2020-01-03T10:18:17.107 回答