React+Antdはテーブルの追加、削除、変更の例を実装します

React をインポートし、{useState} を 'react' から取得します。
'antd' から { Row、Col、Card、Table、Tag、Divider、Modal、Button } をインポートします。
'./model' から ModalData をインポートします。


const App = (props) => {
 console.log(プロパティ、'----')
 定数[isModalVisible、setIsModalVisible] = useState(false);
 定数列 = [
  {
   タイトル: '名前',
   データインデックス: '名前',
   キー: '名前'、
   レンダリング: テキスト => <a>{text}</a>,
  },
  {
   タイトル: 「年齢」
   データインデックス: '年齢',
   キー: '年齢'、
  },
  {
   タイトル: 「住所」、
   データインデックス: 'アドレス',
   キー: 'アドレス'、
  },
  {
   タイトル: 'タグ',
   キー: 'タグ'、
   データインデックス: 'タグ',
   レンダリング: タグ => (
    <ラベル>
     {タグ.map(タグ => {
      color = tag.length > 5 ? 'geekblue' : 'green' とします。
      if (タグ === '敗者') {
       色 = '火山';
      }
      戻る （
       <タグの色={color} キー={tag}>
        {tag.toUpperCase()}
       </タグ>
      );
     })}
    </ラベル>
   ）、
  },
  {
   タイトル: 「アクション」
   キー: 'アクション'、
   配置: '中央',
   レンダリング: (記録) => (
    <ラベル>
     <a onClick={() => showModal(record)}>編集</a>
     <区切り線タイプ="垂直" />
     {/* <Button onClick={()=>showModal(record)} > 削除 </Button> */
     <a onClick={()=>showModal(record)} > 削除</a>
    </ラベル>
   ）、
  },
 ];
 定数データ = [
  {
   キー: '1'、
   名前: 'ジョン・ブラウン'、
   年齢: 32歳
   住所:「ニューヨークNo.1レイクパーク」
   タグ: ['nice', 'developer'],
  },
  {
   キー: '2'、
   名前: 'ジム・グリーン'、
   年齢: 42歳
   住所:「ロンドンNo.1レイクパーク」
   タグ: ['敗者'],
  },
  {
   キー: '3'、
   名前:「ジョー・ブラック」
   年齢: 32歳
   住所:「シドニーNo.1レイクパーク」
   タグ: ['クール', '先生'],
  }
 ];
 
 const showModal = (行) => {
  モーダル表示を有効にします(true);
 };
 定数ハンドルキャンセル = () => {
  モーダル表示を設定します(false);
 }
 const handleOk = (フォーム={},データ) => {
  モーダル表示を設定します(false);
  console.log(フォーム、データ、'pp---')
 }

 

 戻る （
  <ラベル>
   <行ガター={16} className="gutter-row">
    <Col md={24}>
     <Card title="基本的なテーブル + シンプルなポップアップ ボックス" bordered={false}>
      <テーブル列={列} データソース={データ} />
     </カード>
    </Col>
   </行>
   {isModalVisible && <ModalData close={()=>{
    キャンセル処理()
   }} saveOk={(フォーム、データ)=>{ handleOk(フォーム、データ) }}/>>}
   モーダルデータの有無をチェックします。
  </ラベル>
 );
};
定数 la = '111'
エクスポートデフォルト（）=>（
 <アプリ/>
）

'react' から React をインポートします
'./modules/base' から Basic をインポートします。
'./modules/editTableData' から EditTableData をインポートします。
"antd"から{Modal、Tabs、Spin}をインポートします。

デフォルトのクラス ModalData をエクスポートし、React.Component を拡張します{
 コンストラクタ（）{
  素晴らしい（）
  この状態 = {
   isModalVisible:true、
   現在のタブ:'基本列',
   テーブルデータ:[]
  }
 }
 コンポーネントWillMount(){
  this.setState({
   isModalVisible: this.props.isModalVisible
  })
  this.basicColumns = [
   {title:'操作タイプ',editable:true,dataIndex:'名前'},
   {title:'名前',editable:true,dataIndex:'年齢'},
   {title:'説明',editable:true,dataIndex:'住所'}
  ]
  this.associationColumns = [
   {title:'事前操作',editable:true,dataIndex:'name'},
   {title:'関連付けられた権限',editable:true,dataIndex:'age'},
   {title:'関連操作',editable:true,dataIndex:'アドレス'}
  ]
  this.dataViewColumns = [
   {title:'フィールド',editable:true,dataIndex:'名前'},
   {title:'説明',editable:true,dataIndex:'住所'}
  ]
 }
 コンポーネントWillUpdate(){
  コンソール.log(22)
 }
 コンポーネントマウント(){
  コンソール.log(11)
 }
 ハンドルOK = () => {
  // console.log(this.tabData,'this.formRefThree.props')
  フォームを this.formRef.props.form に変換します。
  フォーム.validateFields((err, fieldsValue) => {
   もしエラーが起きたら
    console.log(this.tabData, 'pp---00---');
    this.props.saveOk(フィールド値、this.tabData)
   }
  });
 }
 テーブルを保存(データ){
  console.log(データ、this.state.currentTab、'データ---')
  this.tabData = {
   [this.state.currentTab]:データ
  }

 }
 changeTab(キー){
  console.log(キー、'キー---')
  this.setState({
   現在のタブ:キー
  })
 }
 与える（）{
  
  戻る （
   <モーダル
    title="編集" 
    幅={650}
    閉じると破棄
    見える
    onOk={ () => this.handleOk() } 
    onCancel={ () => this.props.close()}
   >
    <タブ onChange={(キー)=>this.changeTab(キー)}>
     <Tabs.TabPane tab="基本情報" key="basicColumns">
      <span>
       <基本的な wrappComponentRef={(form) => this.formRef = form}/>
       <EditTableData basicColumns={this.basicColumns} saveTable={(data)=>this.saveTable(data)}/>
      </span>
     </Tabs.TabPane>
 
     <Tabs.TabPane tab="関連付け権限" key="associationColumns">
      <EditTableData 関連付け列={this.associationColumns} 保存テーブル={(データ)=>this.saveTable(データ)}/>
     </Tabs.TabPane>
     <Tabs.TabPane tab="データ ビュー" key="dataViewColumns">
      <EditTableData dataViewColumns={this.dataViewColumns} saveTable={(data)=>this.saveTable(data)}/>
     </Tabs.TabPane>
    </タブ>
   </モーダル>
  ）
 }
}

'react' から React をインポートします
'antd' から { Form, Input, Select, Radio } をインポートします。
const { オプション } = 選択;

// 定数 Basic = (props) => {
クラスBasicはReact.Componentを拡張します{
 フォームRef = React.createRef();
 // const [form] = Form.useForm();
 onGenderChange(値){
  スイッチ (値) {
   '男性'の場合:
    this.props.form.setFieldsValue({
     注記: 「こんにちは！」
    });
    戻る;

   '女性'の場合:
    this.props.form.setFieldsValue({
     注記: 「こんにちは、お嬢さん！」
    });
    戻る;

   'その他'の場合:
    this.props.form.setFieldsValue({
     注記: 「こんにちは!」
    });
    戻る;
  }
 }
 onFinish(値){
  console.log(値);
  console.log(this.props.form.getFieldsValue,'09900--')
 }
 
 与える（）{
  console.log(this.props.form.getFieldValue('性別'),'990----')
  const { フォーム } = this.props;
  const { getFieldDecorator, getFieldValue} = フォーム; 
  戻る （
   <div>
    <フォーム ref={this.formRef} layout="inline" name="control-hooks" onFinish={this.onFinish.bind(this)}>
     <Form.Item label="認証ID" が必要です>
      {getFieldDecorator("note")(<Input placeholder="入力してください"/>)}
     </フォーム.アイテム>
     <Form.Item label="権限名" が必要です>
     {getFieldDecorator("name")(<Input placeholder="入力してください"/>)}
     </フォーム.アイテム>
     <Form.Item label="requiredMark" name="ステータス" 必須>
      {getFieldDecorator("必須マーク")(
       <ラジオグループ>
        <Radio.Button value="optional">有効にする</Radio.Button>
        <Radio.Button value="disabled">無効にする</Radio.Button>
       </ラジオグループ>
      )}
     </フォーム.アイテム>
     <Form.Item name="性別" label="カテゴリ" 必須>
      {getFieldDecorator("性別")(
       <Select style={{width: '250px'}} placeholder="選択してください" onChange={this.onGenderChange.bind(this)} allowClear >
        <Option value="male">API の言い訳</Option>
        <Option value="female">テナント</Option>
        <Option value="other">システム</Option>
       </選択>
      )}
     </フォーム.アイテム>
     {getFieldValue('性別') == 'その他' && <Form.Item name="customizeGender" label="注記">
      {getFieldDecorator("customizeGender")(<入力 />)}
     </フォーム.アイテム>} 
    </フォーム>
   </div>

  ）
 }
}
デフォルトのForm.create()(Basic)をエクスポートします。

React をインポートし、{useState} を 'react' から取得します。
'antd' から { Table、Input、InputNumber、Divider、Popconfirm、Form、Typography } をインポートします。
'@ant-design/icons' から {PlusSquareOutlined} をインポートします。
const { Provider, Consumer } = React.createContext() // コンポーネント間の値転送 const originData = [];

(i = 0; i < 5; i++ とします) {
 originData.push({
  キー: i.toString(),
  名前: `Edrward ${i}`,
  年齢: 32歳
  住所: `ロンドンパーク No. ${i}`、
 });
}
EditableCellクラスはReact.Componentを拡張します{
 レンダリングセル = ({getFieldDecorator}) => {
  定数{
   編集、データインデックス、タイトル、入力、レコード、インデックス、子、...restProps
  } = this.props
  戻る （
   <td {...restProps}>
    {編集中?(
     <Form.Item スタイル = {{ マージン: 0, }} >
      {getFieldDecorator(データインデックス,{
       ルール: [{
       必須: true、
       メッセージ: '入力してください'
      }],
      初期値: レコード[データインデックス] 
      })(
      <入力 />
      )}
     </フォーム.アイテム>
    ) : (
     子供たち
    )}
   </td>
  );
 }
 与える（）{
  <Consumer>{this.renderCell}</Consumer> を返します。
 }
}

クラスEditTableDataはReact.Componentを拡張します{
 コンストラクタ(props){
  スーパー(小道具)
  この状態 = {
   データ:originData、
   編集キー:''
  }
 }
 // 編集可能かどうかを判定します isEditing = record => record.key == this.state.editingKey

 // 初期化 init(){
  console.log(this.props, 'pp--') を実行します。
  const データ = this.props.basicColumns || this.props.dataViewColumns || this.props.associationColumns || []
  this.columns = [
   ...データ、
   {
    タイトル: ()=>{
     <span>action<Divider type="vertical" /><PlusSquareOutlined style={{color:"#333"}} onClick={()=>this.addColumns()}/></span> を返します。
    },
    幅:'20%',
    データインデックス: '操作',
    レンダリング: (_, レコード) => {
     const { editingKey } = this.state
     レコードを編集可能にする
     編集可能に戻りますか? (
      <span>
       <消費者>
        {
         フォーム => (
         <a onClick={() => this.save(form,record.key)} >
          保存
        }
       </消費者>
       <区切り線タイプ="垂直" />
       <Popconfirm okText="確認" cancelText="キャンセル" title="キャンセルしてもよろしいですか?" onConfirm={this.cancel}>
        キャンセル
       </ポップ確認>
      </span>
     ) : (
       <span>
        <a disabled={editingKey != ''} onClick={()=>this.edit(record.key)}>編集</a>
        <区切り線タイプ="垂直" />
        <Popconfirm okText="確認" cancelText="キャンセル" title="キャンセルしてもよろしいですか?" onConfirm={()=>this.delete(record.key)}>
         <a>削除</a>
        </ポップ確認>
       </span>
     );
    },
   },
  ]; 
 }
 // 追加 addColumns = () => {
  const newData = [...this.state.data]
  新しいデータ.push({
   キー: newData.length、
   名前: ``,
   年： ''、
   住所: ``
  })
  this.setState({
   データ:新しいデータ
  })
 }
 // 編集 edit = (キー) => {
  this.setState({
   編集キー:キー
  })
 }
 // 削除 delete = (キー) => {
  const newData = [...this.state.data]
  定数インデックス = newData.findIndex(item=>item.key == key)
  newData.splice(インデックス,1)
  this.setState({
   データ:新しいデータ
  })
 }
 // 保存 save = (form,key) => {
  フォーム.validateFields((エラー,行)=>{
   if(エラー){
    戻る
   }
   const newData = [...this.state.data]
   定数インデックス = newData.findIndex(item=>item.key == key)
   if(インデックス > -1){
    const 項目 = newData[インデックス]
    newData.splice(インデックス,1,{
     ...項目、...行
    })
   }
   this.setState({
    編集キー:''、
    データ:新しいデータ
   })
   this.props.saveTable(新しいデータ)
  })

 }

 // キャンセル cancel = () => {
  this.setState({
   編集キー: ''
  })
 }

 与える（）{
  この.init()
  console.log(this.columns,'columns')
  const columns = this.columns.map(col => {
   if(!col.editable){
    戻り列
   }
   戻る {
    ...col、
    onCell:record => ({
     記録、
     入力:入力、
     データインデックス:col.dataIndex、
     タイトル:col.title,
     編集:this.isEditing(レコード)
    })
   }
  })
  戻る （
   <プロバイダー値={this.props.form}>
    <表の境界線 style={{marginTop:'30px'}} コンポーネント={{
     体：{
      セル:編集可能なセル
     }
    }} columns={columns} dataSource={this.state.data} pagination={false}/>
   </プロバイダー>
  ）
 }
}


デフォルトのエクスポート Form.create()(EditTableData)