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

根据状态需要填充图标?

mapping reactjs angularjs javascript

-1

user9196877 · 技术社区 · 6 年前

根据状态号,我需要填充“批准”和“拒绝”图标。在响应中,您可以看到响应编号,其中ever status为1,我需要填充图标

this.state = {
 listapproval: {
            contracts: '',
        },
}

状态变量listapproval具有以下响应,如图所示。我得到了回应

import React, { Component } from "react";
import { Link, browserHistory } from 'react-router';
   import * as TemplateAction from '../../actions/templateAction.jsx';
import TemplateStore from '../../store/templateStore.jsx';
import * as ClientAction from '../../actions/clientAction.jsx';
 import ClientStore from '../../store/clientStore.jsx';
import * as ContractAction from '../../actions/contractAction.jsx';
import ContractStore from '../../store/contractStore.jsx';
import * as UserAction from '../../actions/userAction.jsx';
import UserStore from '../../store/userStore.jsx';
import Dialog from 'material-ui/Dialog';

export default class ClickableRenderer extends Component {
constructor(props) {
    super(props);

    this.state = {
        cell: {
            row: this.props.value,
            col: this.props.colDef.headerName
        },
        text: '',
        openrejectDialog: false,
        openrejectedcomment: false,
        contractlist: {

        },
        singlecontract: {
            contract: {
                rejectionReason: ''
            }
        },

        rejectionsinglecontract: {
            contract: {
                rejectionReason: ''
            }
        },
        clientdetails: [],
        listapproval: {
            contracts: [],
        },
        userroleslist: {
            user: {
                role: {
                    permission: [],
                    name: '',
                },
            }
        },
    };

    this.clicked = this.clicked.bind(this);
    this.rejectClicked = this.rejectClicked.bind(this);
    this._templateStoreChange = this._templateStoreChange.bind(this);
    this._contractStoreChange = this._contractStoreChange.bind(this);
    this._clientStoreChange = this._clientStoreChange.bind(this);
    this._handleContractSelection = this._handleContractSelection.bind(this);
    this._getSingleContract = this._getSingleContract.bind(this);
    this._userStoreChange = this._userStoreChange.bind(this);
    this.handleChange = this.handleChange.bind(this);

}

componentWillMount() {
    TemplateStore.on('change', this._templateStoreChange);
    ContractStore.on('change', this._contractStoreChange);
    ClientStore.on('change', this._clientStoreChange);
    UserStore.on('change', this._userStoreChange);
}

componentWillUnmount() {
    TemplateStore.removeListener('change', this._templateStoreChange);
    ContractStore.removeListener('change', this._contractStoreChange);
    ClientStore.removeListener('change', this._clientStoreChange);
    UserStore.removeListener('change', this._userStoreChange);
}

componentDidMount() {
    ContractAction._getContractList();
    UserAction._getUserRolesList();
    ContractAction._getListApprovals();
}

_templateStoreChange(type) {
    if (type == 'OrganizationList') {
        let organizationlist = TemplateStore._getOrganizionDetailsList() || {};
        this.setState({ organizationlist });
    }
    if (type == 'TemplateList') {
        let templatelist = TemplateStore._getTemplateDetailsList() || {};
        this.setState({ templatelist });
    }
}

_clientStoreChange(type) {
    if (type == 'ClientList') {
        let clientdetails = ClientStore._getClientDeatilsList() || {};
        this.setState({ clientdetails });
    }
}

_contractStoreChange(type) {
    if (type == 'ContractList') {
        let contractlist = ContractStore._getContractDetailsList() || {};
        this.setState({ contractlist });
    }

    if (type == 'SingleContract') {
        let singlecontract = ContractStore._getSingleContractDetails() || {};
        this.setState({ singlecontract });

    }

    if (type == 'ListApprovals') {
        let listapproval = ContractStore._getApprovalsList() || {};

        this.setState({ listapproval });
    }

    if (type == 'RejectionSingleContract') {
        let rejectionsinglecontract = ContractStore._rejectionsinglecontract() || {};
        this.setState({ rejectionsinglecontract });

    }



}
_userStoreChange(type) {
    if (type == 'UserList') {
        let userdetails = UserStore._getUserDetailsList() || {};
        this.setState({ userdetails });
    }
    if (type == 'RolesList') {
        let roleslist = UserStore._getRolesList() || {};
        this.setState({ roleslist });
    }

    if (type == 'UserRolesList') {
        let userroleslist = UserStore._getUserRolesList() || {};
        this.setState({ userroleslist });
    }
}

 _getSingleContract(id) {

    let data = {
        id: this.state.cell.row,
    };
    localStorage.setItem("contractIdforview", data.id);
    ContractAction._getSingleContract(data);

}

render() {
    let roleslist = this.state.userroleslist.user.role.permission || {};
    let userroleslistname = this.state.userroleslist.user.role.name;
    let listapproval = this.state.listapproval.contracts;
    console.log(listapproval);
    let statusaprve = listapproval && listapproval.map(statusnum => (statusnum.status)) || {};
    console.log(statusaprve);




    return (
        <div>

            {
                roleslist.map((roles) => {
                    if (roles.moduleName == "Contracts" && roles.permissionName == "Read") {
                        return (
                            <Link to="/previewContract" title="preview" className=" mr-2" onClick={this._getSingleContract}>
                                <i className="fa fa-eye"></i>
                            </Link>

                        )
                    }
                })
            }



            {statusaprve === 1  ?
                 <a className="mr-2" title="Approve" onClick={this.clicked}><i className="fa fa-thumbs-up"></i></a>
                 : null}



            {statusaprve === 1 ?
                 <a type='button' title="Reject" className="mr-2" onClick={this._openrejectDialog.bind(this)}><i className="fa fa-ban"></i></a>
                : null}









        </div>
    );
}
}

StatusAProve变量具有以下状态,如下图所示,我正在尝试根据状态1填充approve和reject图标,但图标仍没有填充?

1 回复 | 直到 6 年前

Dave Meehan 6 年前

这有点难说,因为ClickableRenderer类似乎用于渲染表中的每个单元格(或其中一些单元格)。 this.props.value 复制到 this.state.cell.row ,并且可能是 this.state.listapproval.contracts ,但我认为还传递了其他道具,但该组件没有记录需要哪些道具。你可以 console.log(this.props) 开始时 render() 提供更好的想法,或者查看JSX ClickableRenderer 实例化以查看传递的内容。

据我所知,这里有一个替代方案 render() 那可能是你想要的。

render() {
  let roleslist = this.state.userroleslist.user.role.permission || {};
  let userroleslistname = this.state.userroleslist.user.role.name;
  let contracts = this.state.listapproval.contracts;

  return (
    <div>
      {
        roleslist.map((roles) => {
          if (roles.moduleName == "Contracts" && roles.permissionName == "Read") {
            return (
              <Link to="/previewContract" title="preview" className=" mr-2" onClick={this._getSingleContract}>
                <i className="fa fa-eye"></i>
              </Link>
            )
          }
        );

        if (contracts[this.props.value].status === 1) {
          <a 
            className="mr-2" 
            title="Approve" 
            onClick={this._approveContract}
          >
            <i className="fa fa-thumbs-up"></i>
          </a>
          <a 
            type='button' 
            title="Reject" 
            className="mr-2" 
            onClick={this._openrejectDialog.bind(this)}
          >
            <i className="fa fa-ban"></i>
          </a>
        }
      }
    </div>
  );
}

你似乎没有一个 _approveContract 因此,您需要决定如何处理这一问题。

我觉得你的代码实现得很模糊。你可以考虑添加 PropTypes 因为这有助于记录和验证传递的道具。

投入的大部分 this.state 似乎没有必要。阅读无状态组件,了解如何简化。