Composant de transfert de conception Ant ReactJS UI

import React, { useState } from 'react';

import "antd/dist/antd.css";

import { Transfer } from 'antd';

 

const mockData = [

  {key: "0", title: "Title 0", description: "Sample Description 0"}, 

  {key: "1", title: "Title 1", description: "Sample Description 1"},

  {key: "2", title: "Title 2", description: "Sample Description 2"},

  {key: "3", title: "Title 3", description: "Sample Description 3"},

  {key: "4", title: "Title 4", description: "Sample Description 4"},

  {key: "5", title: "Title 5", description: "Sample Description 5"},

];

 

export default function App() {

 

  

  const [targetKeys, setTargetKeys] = useState(mockData);

   

  

  const [selectedKeys, setSelectedKeys] = useState([]);

 

  return (

    <div style={{

      display: 'block', width: 700, padding: 30

    }}>

      <h4>ReactJS Ant-Design Transfer Component</h4>

      <Transfer

        dataSource={mockData}

        titres={['Source', 'Target']}

        render={item => item.title}

        selectedKeys={selectedKeys}

        targetKeys={targetKeys}

        onChange={(nextTargetKeys) => {

          setTargetKeys(nextTargetKeys);

        }}

        onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {

          setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);

        }}

      />

    </div>

  );

}

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Aller en haut