React+Antd implementiert ein Beispiel zum Hinzufügen, Löschen und Ändern von Tabellen

importiere React, { useState }von 'react'
importiere { Zeile, Spalte, Karte, Tabelle, Tag, Trenner, Modal, Schaltfläche } von „antd“;
importiere ModalData aus „./model“


const App = (Eigenschaften) => {
 console.log(Eigenschaften,'----')
 const [isModalVisible, setIsModalVisible] = useState(false);
 const Spalten = [
  {
   Titel: 'Name',
   Datenindex: "Name",
   Schlüssel: 'Name',
   rendern: Text => <a>{text}</a>,
  },
  {
   Titel: 'Alter',
   dataIndex: "Alter",
   Schlüssel: 'Alter',
  },
  {
   Titel: 'Adresse',
   dataIndex: 'Adresse',
   Schlüssel: 'Adresse',
  },
  {
   Titel: 'Tags',
   Schlüssel: 'Tags',
   Datenindex: "Tags",
   rendern: Tags => (
    <Bezeichnung>
     {tags.map(tag => {
      lass Farbe = Tag-Länge > 5? „Geekblue“: „Grün“;
      if (tag === 'Verlierer') {
       Farbe = "Vulkan";
      }
      zurückkehren (
       <Tag-Farbe={Farbe} Schlüssel={Tag}>
        {tag.toUpperCase()}
       </Tag>
      );
     })}
    </Bezeichnung>
   ),
  },
  {
   Titel: 'Aktion',
   Schlüssel: 'Aktion',
   ausrichten: 'zentriert',
   rendern: (Aufzeichnung) => (
    <Bezeichnung>
     <a onClick={() => showModal(record)}>Bearbeiten</a>
     <Teilertyp="vertikal" />
     {/* <Button onClick={()=>showModal(record)} > Löschen </Button> */}
     <a onClick={()=>showModal(record)} > Löschen</a>
    </Bezeichnung>
   ),
  },
 ];
 const Daten = [
  {
   Schlüssel: '1',
   Name: 'John Brown',
   Alter: 32,
   Adresse: 'New York No. 1 Lake Park',
   Tags: ['nett', 'Entwickler'],
  },
  {
   Taste: '2',
   Name: 'Jim Green',
   Alter: 42,
   Adresse: 'London No. 1 Lake Park',
   Schlagworte: ['Verlierer'],
  },
  {
   Taste: '3',
   Name: 'Joe Black',
   Alter: 32,
   Adresse: 'Sidney No. 1 Lake Park',
   Schlagworte: ['cool', 'Lehrer'],
  }
 ];
 
 const showModal = (Zeile) => {
  setIsModalVisible(true);
 };
 const handleCancel = () => {
  setIsModalVisible(false);
 }
 const handleOk = (form={},data) => {
  setIsModalVisible(false);
  console.log(Formular,Daten,'pp---')
 }

 

 zurückkehren (
  <Bezeichnung>
   <Zeilenrand={16} className="Randrand-Zeile">
    <Col md={24}>
     <Card title="Einfache Tabelle + einfache Popup-Box" bordered={false}>
      <Tabellenspalten={Spalten} Datenquelle={Daten} />
     </Karte>
    </Col>
   </Zeile>
   {isModalVisible && <ModalData close={()=>{
    handleAbbrechen()
   }} speichernOk={(Formular,Daten)=>{ handleOk(Formular,Daten) }}/>}
   {/* {isModalVisible && <ModalData />} */}
  </Bezeichnung>
 );
};
Konstanten la = "111"
Standard exportieren () => (
 <App/>
)

React von „react“ importieren
importiere Basic aus './modules/base'
importiere EditTableData aus './modules/editTableData'
importiere { Modal, Tabs, Spin } von „antd“;

exportiere Standardklasse ModalData erweitert React.Component{
 Konstruktor(){
  super()
  dieser.Zustand = {
   istModalVisible:true,
   currentTab:'grundlegende Spalten',
   Tabellendaten:[]
  }
 }
 KomponenteWillMount(){
  dies.setState({
   istModalVisible: this.props.isModalVisible
  })
  this.basicColumns = [
   {title:'Operationstyp',editable:true,dataIndex:'name'},
   {title:'Name',editierbar:true,dataIndex:'Alter'},
   {title:'Beschreibung',editable:true,dataIndex:'Adresse'}
  ]
  diese.associationColumns = [
   {title:'Vor der Operation',editable:true,dataIndex:'name'},
   {title:'Zugehörige Berechtigungen',editable:true,dataIndex:'age'},
   {title:'Zugehörige Operationen',editable:true,dataIndex:'address'}
  ]
  this.dataViewColumns = [
   {Titel:'Feld',bearbeitbar:true,Datenindex:'Name'},
   {title:'Beschreibung',editable:true,dataIndex:'Adresse'}
  ]
 }
 KomponenteWillUpdate(){
  console.log(22)
 }
 KomponenteDidMount(){
  konsole.log(11)
 }
 handleOk = () => {
  // Konsole.log(diese.tabData,'diese.formRefThree.props')
  const form = diese.formRef.props.form;
  form.validateFields((err, fieldsValue) => {
   wenn (!err) {
    Konsole.log(diese.tabData,'pp---00---');
    this.props.saveOk(FelderWert,this.tabData)
   }
  });
 }
 Tabelle speichern(Daten){
  Konsole.Protokoll(Daten,dieser.Status.aktuelleRegisterkarte,'Daten---')
  diese.tabData = {
   [dieser.Status.aktuelleRegisterkarte]:Daten
  }

 }
 changeTab(Taste){
  console.log(Schlüssel,'Schlüssel---')
  dies.setState({
   aktuellerTab:Schlüssel
  })
 }
 machen(){
  
  zurückkehren (
   <Modal
    Titel="Bearbeiten" 
    Breite={650}
    Zerstören beim Schließen
    sichtbar
    beiOk={ () => this.handleOk() } 
    beiAbbrechen={ () => this.props.close()}
   >
    <Tabs onChange={(Schlüssel)=>this.changeTab(Schlüssel)}>
     <Tabs.TabPane tab="Grundlegende Informationen" key="basicColumns">
      <span>
       <Basic wrappedComponentRef={(form) => this.formRef = form}/>
       <EditTableData basicColumns={diese.basicColumns} saveTable={(Daten)=>diese.saveTable(Daten)}/>
      </span>
     </Tabs.TabPane>
 
     <Tabs.TabPane tab="Assoziationsberechtigungen" key="associationColumns">
      <EditTableData associationColumns={diese.associationColumns} saveTable={(Daten)=>diese.saveTable(Daten)}/>
     </Tabs.TabPane>
     <Tabs.TabPane tab="Datenansicht" key="dataViewColumns">
      <EditTableData dataViewColumns={diese.dataViewColumns} saveTable={(Daten)=>diese.saveTable(Daten)}/>
     </Tabs.TabPane>
    </Tabs>
   </Modal>
  )
 }
}

React von „react“ importieren
importiere { Formular, Eingabe, Auswahl, Radio } von „antd“;
const { Option } = Auswählen;

// const Basic = (Eigenschaften) => {
Klasse Basic erweitert React.Component{
 formRef = React.createRef();
 // const [form] = Form.useForm();
 beiGeschlechtsänderung(Wert){
  Schalter (Wert) {
   Fall 'männlich':
    diese.props.form.setFieldsValue({
     Hinweis: 'Hi, Mann!',
    });
    zurückkehren;

   Fall 'weiblich':
    diese.props.form.setFieldsValue({
     Hinweis: "Hallo, Lady!",
    });
    zurückkehren;

   Fall 'anderes':
    diese.props.form.setFieldsValue({
     Hinweis: "Hallo zusammen!",
    });
    zurückkehren;
  }
 }
 onFinish(Werte){
  konsole.log(Werte);
  Konsole.log(this.props.form.getFieldsValue,'09900--')
 }
 
 machen(){
  Konsole.log(this.props.form.getFieldValue('Geschlecht'),'990----')
  const { form } = diese.props;
  const { getFieldDecorator, getFieldValue} = Formular; 
  zurückkehren (
   <div>
    <Formular ref={this.formRef} layout="inline" name="control-hooks" onFinish={this.onFinish.bind(this)}>
     <Form.Item label="Autorisierungs-ID" erforderlich>
      {getFieldDecorator("note")(<Eingabeplatzhalter="Bitte eingeben"/>)}
     </Form.Item>
     <Form.Item label="Berechtigungsname" erforderlich>
     {getFieldDecorator("name")(<Eingabeplatzhalter="Bitte eingeben"/>)}
     </Form.Item>
     <Form.Item label="erforderlichMarkierung" name="Status" erforderlich>
      {getFieldDecorator("erforderlicheMarkierung")(
       <Radio.Gruppe>
        <Radio.Button value="optional">Aktivieren</Radio.Button>
        <Radio.Button value="disabled">Deaktivieren</Radio.Button>
       </Radio.Gruppe>
      )}
     </Form.Item>
     <Form.Item name="gender" label="Kategorie" erforderlich>
      {getFieldDecorator("Geschlecht")(
       <Select style={{width: '250px'}} placeholder="Bitte auswählen" onChange={this.onGenderChange.bind(this)} allowClear >
        <Option value="male">API-Entschuldigung</Option>
        <Option value="female">Mieter</Option>
        <Optionswert="anderes">System</Option>
       </Auswählen>
      )}
     </Form.Item>
     {getFieldValue('gender') == 'other' && <Form.Item name="customizeGender" label="Note">
      {getFieldDecorator("customizeGender")(<Input />)}
     </Form.Item>} 
    </Form>
   </div>

  )
 }
}
Standard exportieren Form.create()(Basic)

importiere React, { useState } von 'react';
importiere { Tabelle, Eingabe, Eingabenummer, Trennzeichen, Pop-Bestätigung, Formular, Typografie } von 'antd';
importiere {PlusSquareOutlined} aus '@ant-design/icons';
const { Provider, Consumer } = React.createContext() // Werteübertragung zwischen Komponenten const originData = [];

für (sei i = 0; i < 5; i++) {
 originData.push({
  Schlüssel: i.toString(),
  Name: `Edrward ${i}`,
  Alter: 32,
  Adresse: `London Park Nr. ${i}`,
 });
}
Klasse EditableCell erweitert React.Component{
 renderCell = ({getFieldDecorator}) => {
  Konstante {
   Bearbeiten, Datenindex, Titel, Eingaben, Datensatz, Index, untergeordnete Elemente, ...restProps
  } = diese.Eigenschaften
  zurückkehren (
   <td {...restProps}>
    {Bearbeiten? (
     <Form.Item-Stil={{ margin: 0, }} >
      {getFieldDecorator(dataIndex,{
       Regeln: [{
       erforderlich: wahr,
       Meldung: „Bitte eingeben“
      }],
      Anfangswert: Datensatz[Datenindex] 
      })(
      <Eingaben />
      )}
     </Form.Item>
    ) : (
     Kinder
    )}
   </td>
  );
 }
 machen(){
  return <Consumer>{this.renderCell}</Consumer>
 }
}

Klasse EditTableData erweitert React.Component{
 Konstruktor (Requisiten) {
  super(Requisiten)
  dieser.Zustand = {
   Daten: Herkunftsdaten,
   Bearbeitungsschlüssel:''
  }
 }
 // Bestimmen Sie, ob es editierbar ist. isEditing = Datensatz => Datensatz.Schlüssel == this.state.editingKey

 // Initialisierung init(){
  Konsole.log(diese.Eigenschaften,'pp--')
  const data = this.props.basicColumns || this.props.dataViewColumns || this.props.associationColumns || []
  diese.spalten = [
   ...Daten,
   {
    Titel: ()=>{
     Rückgabe <span>Aktion<Divider type="vertical" /><PlusSquareOutlined style={{color:"#333"}} beiKlick={()=>this.addColumns()}/></span>
    },
    Breite: '20%',
    Datenindex: "Vorgang",
    rendern: (_, aufzeichnen) => {
     const { Bearbeitungsschlüssel } = dieser.Zustand
     const editable = this.isEditing(Datensatz);
     zurück editierbar ? (
      <span>
       <Verbraucher>
        {
         Form => (
         <a onClick={() => dies.speichern(Formular,Datensatz.Schlüssel)} >
          Speichern
        }
       </Verbraucher>
       <Teilertyp="vertikal" />
       <Popconfirm okText="Bestätigen" cancelText="Abbrechen" title="Möchten Sie wirklich abbrechen?" onConfirm={this.cancel}>
        Stornieren
       </Popconfirm>
      </span>
     ) : (
       <span>
        <a disabled={editingKey != ''} onClick={()=>this.edit(record.key)}>Bearbeiten</a>
        <Teilertyp="vertikal" />
        <Popconfirm okText="Bestätigen" cancelText="Abbrechen" title="Möchten Sie wirklich abbrechen?" onConfirm={()=>this.delete(record.key)}>
         <a>Löschen</a>
        </Popconfirm>
       </span>
     );
    },
   },
  ]; 
 }
 // hinzufügen addColumns = () => {
  const newData = [...dieser.Zustand.Daten]
  neueDaten.push({
   Schlüssel: newData.length,
   Name: ``,
   Alter: '',
   Adresse: ``
  })
  dies.setState({
   Daten: neue Daten
  })
 }
 // Bearbeiten edit = (Taste) => {
  dies.setState({
   Bearbeitungsschlüssel:Schlüssel
  })
 }
 // löschen delete = (Taste) => {
  const newData = [...dieser.Zustand.Daten]
  const index = newData.findIndex(item=>item.key == key)
  neueDaten.splice(index,1)
  dies.setState({
   Daten: neue Daten
  })
 }
 // Speichern save = (formular,schlüssel) => {
  form.validateFields((Fehler,Zeile)=>{
   wenn(Fehler){
    zurückkehren
   }
   const newData = [...dieser.Zustand.Daten]
   const index = newData.findIndex(item=>item.key == key)
   wenn(index > -1){
    const item = neueDaten[index]
    neueDaten.splice(index,1,{
     ...Element, ...Zeile
    })
   }
   dies.setState({
    Bearbeitungsschlüssel:'',
    Daten: neue Daten
   })
   this.props.saveTable(neueDaten)
  })

 }

 // Abbrechen cancel = () => {
  dies.setState({
   Bearbeitungsschlüssel: ''
  })
 }

 machen(){
  dies.init()
  Konsole.log(diese.Spalten,'Spalten')
  const Spalten = diese.Spalten.Map(col => {
   wenn(!col.editable){
    Rücksprungspalte
   }
   zurückkehren {
    ...Spalte,
    onCell:Datensatz => ({
     aufzeichnen,
     Eingänge:Eingang,
     Datenindex:Spalte.Datenindex,
     Titel:Spaltentitel,
     Bearbeiten: dies.istBearbeiten(Datensatz)
    })
   }
  })
  zurückkehren (
   <Anbieterwert={this.props.form}>
    <Tabellenrandstil={{marginTop:'30px'}} Komponenten={{
     Körper:{
      Zelle:BearbeitbareZelle
     }
    }} Spalten={Spalten} Datenquelle={this.state.data} Paginierung={false}/>
   </Anbieter>
  )
 }
}


Standard exportieren Form.create()(EditTableData)