weixin_46370335 2021-09-17 11:34 采纳率: 100%
浏览 46
已结题

ant design的穿梭框 transfer 底部怎么设置两个不一样,怎么设置不同的页脚? 不同的怎么实现

img


ant design的穿梭框 transfer 底部怎么设置两个不一样,怎么设置不同的页脚? 不同的怎么实现

  • 写回答

1条回答 默认 最新

  • CSDN专家-showbo 2021-09-17 12:12
    关注

    示例有参考,

    有帮助或启发麻烦点个采纳【本回答右上角】,谢谢~~

    img

    import { Transfer, Button } from 'antd';
    
    class App extends React.Component {
      state = {
        mockData: [],
        targetKeys: [],
      };
    
      componentDidMount() {
        this.getMock();
      }
    
      getMock = () => {
        const targetKeys = [];
        const mockData = [];
        for (let i = 0; i < 20; i++) {
          const data = {
            key: i.toString(),
            title: `content${i + 1}`,
            description: `description of content${i + 1}`,
            chosen: Math.random() * 2 > 1,
          };
          if (data.chosen) {
            targetKeys.push(data.key);
          }
          mockData.push(data);
        }
        this.setState({ mockData, targetKeys });
      };
    
      handleChange = targetKeys => {
        this.setState({ targetKeys });
      };
    
      renderFooter = (props, { direction }) => {
        if (direction === 'left') {
          return (
            <Button size="small" style={{ float: 'left', margin: 5 }} onClick={this.getMock}>
              Left button reload
            </Button>
          );
        }
        return (
          <Button size="small" style={{ float: 'right', margin: 5 }} onClick={this.getMock}>
            Right button reload
          </Button>
        );
      };
    
      render() {
        return (
          <Transfer
            dataSource={this.state.mockData}
            showSearch
            listStyle={{
              width: 250,
              height: 300,
            }}
            operations={['to right', 'to left']}
            targetKeys={this.state.targetKeys}
            onChange={this.handleChange}
            render={item => `${item.title}-${item.description}`}
            footer={this.renderFooter}
          />
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏

报告相同问题?

问题事件

  • 系统已结题 9月25日
  • 已采纳回答 9月17日
  • 创建了问题 9月17日

悬赏问题

  • ¥20 有关神经网络这道(b)determine the parameters of neural network
  • ¥25 annaconda jvpyter
  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy
  • ¥20 逻辑回归法分析品牌知名度和购买意向