最近、Vue で書かれた元のプロジェクトを模倣し、それを react 構文に変更した小さなものを作成しました。編集可能なテーブルを作成したのですが、途中でいくつか問題が発生しました。バグを記録するつもりです。まずはエフェクト図とコードを貼り付けます。主な用途はreact+antdです テーブル、編集をクリックすると、ポップアップウィンドウが開きます。ポップアップウィンドウは、さまざまなフォーム+編集可能なテーブルを表示するためのタブを切り替えるもので、テーブル内の操作バー「+」で、テーブルに編集可能なデータの行を追加し、編集、保存、削除します。これらの操作については、詳細も効果の写真も説明しません。 テーブル/index.jsReact をインポートし、{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.jsReact をインポートし、{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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: CentOS 7 で rpm パッケージを使用して MySQL 5.7.18 をインストールする
序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...
チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...
この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...
まず最初に指摘しておきたいのは、人間は視覚的な区分を通じてコンテンツの意味を判断できるが、検索エ...
mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...
目次1. 基本理論1.1 取引1.2 分散トランザクション2. 分散トランザクションソリューション2...
歴史ルート履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装する...
この記事では、Linux サーバー上で Nginx と Apache の共存を実装する方法について説...
1. MySQL マスタースレーブ非同期1.1 ネットワーク遅延MySQLのマスタースレーブレプリケ...
zip インストール パッケージをダウンロードします。 MySQL8.0 For Windows z...
Web ページ上の色の表現は、さまざまな要因によって影響を受けます。Web ページで非常に美しい配色...
この記事では、マウスがドロップダウンボックスの上を通過するときにドロップダウンボックスを表示するため...
導入いつものように、シーンから始めましょう〜インタビュアー:「トランザクションの4つの特性をご存知で...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...
HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...