时间戳

首页 > 解决方案 > 根据条件隐藏元素

reactjs - 根据条件隐藏元素

问题描述

我有一个应用程序，根据条件我想隐藏或显示数据。所以，我添加了条件：

columnTitle:selectedRowKeys.length > 0? { selections: true }: { selections: false },

但条件不起作用。当我点击一个复选框时，我想显示selections，当没有一个复选框被点击时，我想隐藏selections.

这是我的代码：https ://codesandbox.io/s/custom-selection-ant-design-demo-mvy5j?file=/index.js:982-1017

如何解决问题？

选择是这个下拉列表： 在此处输入图像描述

标签： reactjs

解决方案

我试过了，它正在工作

columnTitle:selectedRowKeys.length > 0 ? false : true,

完整的rowSelection对象将是

  const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      columnTitle:selectedRowKeys.length > 0 ? false : true,
      hideDefaultSelections: true,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        {
          key: "odd",
          text: "Select Odd Row",
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          }
        },
        {
          key: "even",
          text: "Select Even Row",
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          }
        }
      ]
    };

尝试这个

推荐阅读