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

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

最近、Vue で書かれた元のプロジェクトを模倣し、それを react 構文に変更した小さなものを作成しました。編集可能なテーブルを作成したのですが、途中でいくつか問題が発生しました。バグを記録するつもりです。まずはエフェクト図とコードを貼り付けます。主な用途はreact+antdです

テーブル、編集をクリックすると、ポップアップウィンドウが開きます。ポップアップウィンドウは、さまざまなフォーム+編集可能なテーブルを表示するためのタブを切り替えるもので、テーブル内の操作バー「+」で、テーブルに編集可能なデータの行を追加し、編集、保存、削除します。これらの操作については、詳細も効果の写真も説明しません。

テーブル/index.js

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'
エクスポートデフォルト()=>(
 <アプリ/>
)

テーブル/モデル/index.js

'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>
    </タブ>
   </モーダル>
  )
 }
}

テーブル/モデル/モジュール/base.js

'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)をエクスポートします。

テーブル/モデル/モジュール/editTable.js

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)

以上がReact+Antdを使用して追加、削除、変更可能なテーブルを実装する例の詳細です。React+Antdを使用して追加、削除、変更可能なテーブルを実装する方法の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • ReactとAntdのFormコンポーネントを組み合わせてログイン機能を実装する方法を詳しく説明します
  • React antd タブの切り替えによりサブコンポーネントが繰り返し更新される
  • react+antdはツリーディレクトリ操作を再帰的に実装します
  • Reactはantdフォーム割り当てを使用してポップアップボックスの操作を変更します
  • React antd テーブルで 1 つ以上の画像をレンダリングする
  • react-antd でポップアップ フォームのコンテンツを親コンポーネントに渡す方法
  • Reactプロジェクトでantdのフォームコンポーネントを使用して、入力ボックスの値を動的に設定する
  • antd をインストールした後、React で ''./locale'' を解決できない問題を解決する (推奨)
  • React は antd オンラインテーマの動的切り替えを実装します
  • ToDoイベントを実装するためのReact+Antd+Reduxメソッド
  • create-react-app で antd を使用してオンデマンドで無効なスタイルを読み込む問題の解決方法

<<:  nginx 設定場所方法の概要

>>:  CentOS 7 で rpm パッケージを使用して MySQL 5.7.18 をインストールする

推薦する

MySQL最適化ツール(推奨)

序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...

jQueryのチェーンプログラミングスタイルの詳細な例

チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

セマンティック XHTML タグの紹介

まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコン​​テンツの意味を判断できるが、検索エ...

MySQL のグループ分けの例

mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...

MySQL と Golan 間の従来の分散トランザクションのための 7 つのソリューション

目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...

vue-router 履歴モード サーバー側設定プロセス記録

歴史ルート履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装する...

LinuxサーバにおけるNginxとApacheの共存の実装方法の分析

この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...

MySQL マスターとスレーブの不整合とその解決策の詳細な説明

1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...

mysql-8.0.11-winx64.zip の詳細なインストール チュートリアル

zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...

ウェブデザイン必携ハンドブック 216 ウェブセーフカラー

Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色...

JavaScriptは、マウスが通過したときにドロップダウンボックスを表示するように実装します。

この記事では、マウスがドロップダウンボックスの上を通過するときにドロップダウンボックスを表示するため...

MySQLにおけるACIDトランザクションの実装原理の詳細な説明

導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

HTML 再利用テクニック

HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...