鍍金池/ 問答/HTML/ form設(shè)置的數(shù)據(jù)怎么添加到table

form設(shè)置的數(shù)據(jù)怎么添加到table

圖片描述

如圖: 是一個form表單,在頂部輸入數(shù)據(jù)點擊新增,怎么把數(shù)據(jù)插入到下面的表格中,并顯示。

頁面代碼:

編輯跳轉(zhuǎn)表單的代碼:
<Tooltip title="編輯">
    <a onClick={this.showEditForm.bind(this,text)}><Icon type="edit"  style={{ fontSize: 18 }} /></a>
</Tooltip>

showEditForm=(text) =>{
        const data_save = this.props.signal.data_save.data
        const data_form = []
        for (let j=0; j<data_save.length; j++) {
            for (let i=0; i<data_save[j].signal.length; i++) {
                if(data_save[j].variety == text.variety){
                    this.setState({
                        okText: '保存',
                        modalVisible:true,
                        isCreate:false,
                        formTitle: '編輯交易信號'+' '+text.variety,
                        currentEditId:text.variety,
                        data_form: 
                            data_form.valueOf(
                                data_form.push({
                                    time:data_save[j].signal[i][0],
                                    signal:data_save[j].signal[i][1]
                                })
                            ),
                    })
                    /*console.log("data_form", data_form)*/
                    this.form.setFieldsValue({
                        ...data_form
                    });
                }
            }
            
        }
    }

表單代碼:

import React from 'react'
import PropTypes from 'prop-types'
import { Table, Form, Card, Tooltip, Input, InputNumber, Radio, Modal,Select, Icon, Button, TimePicker } from 'antd';
import currencies from '../../common/currencies.js';
const FormItem = Form.Item
const format = 'HH:mm';


const AddSignal =(props) => {
  console.log("form",props)
  this.state ={
    data: props.data,
    loading: false,
  }
  console.log("state", this.state)
  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) =>{
      if(!err) {
          this.state.data.valueOf(this.state.data.push(values))
          console.log('form1', values, this.state.data)
      }
    })
  }
  const {visible, onCancel, onCreateOrSave, form, title, okText, initValues} = props;
  const { getFieldDecorator } = form;
  const clumn = [
  {
    title: '時間',
    dataIndex: 'time',
    width: 100,
    editable: true,
  },
  {
    title: '信號',
    dataIndex: 'signal',
    width: 120,
    editable: true,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 30,
    render: (text, record, index) => (
      <span>
        <Tooltip title="刪除">
          <a style={{color:"red"}}>
              <Icon style={{ fontSize: 16}} type="delete" />
          </a>
        </Tooltip>
      </span>
    ),
  }]
  return (
    <Modal
      visible={visible}
      title={title}
      okText={okText}
      onCancel={onCancel}
      onOk={onCreateOrSave}>
        <Form layout="inline" onSubmit={handleSubmit}>
          <FormItem>
            {getFieldDecorator('time',{})(
            /*<TimePicker format={format} />*/<Input />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('signal',{})(
              <Select placeholder="請選擇信號" style={{ width: 160}} >
                <Select.Option value="[開始]">[開始] </Select.Option>
              <Select.Option value="[結(jié)束]">[結(jié)束交易] </Select.Option>
              <Select.Option value="[集合]">[集合] </Select.Option>
              </Select>
            )}
          </FormItem>
          <FormItem><Button htmlType="submit" type="primary">新增</Button></FormItem>
        </Form>
        <Table rowKey='time' columns={clumn} dataSource={this.state.data} pagination={false} size="small" scroll={{y: 350}} />
    </Modal>
  )
}



export default Form.create()(AddSignal)
回答
編輯回答
夢囈
  const handleSubmit = (e) => {
      e.preventDefault();
      form.validateFields((err, values) =>{
          if(!err) {
              this.state.data.valueOf(this.state.data.push(values))
               console.log('form1', values, this.state.data)
          }
      })
  }

this.state.data.valueOf(this.state.data.push(values))

改為

let temp = new Array(...this.state.data);
temp.push(values);
this.setState({data:temp});

不通過setState改變state,UI是不會渲染的

2018年8月20日 06:48
編輯回答
初心

往循環(huán)的數(shù)組里面添加一組數(shù)據(jù)就好了,就應(yīng)該自動幫你實現(xiàn)了

2018年1月5日 00:51
編輯回答
挽青絲

往數(shù)據(jù)源新增一條數(shù)據(jù),然后再重繪表格。

const ros = [1, 2, 3];
this.setstate({
   ros
});
2017年5月26日 06:01
編輯回答
舊酒館

獲取到新增加的時間和信號,然后push到表格中

2017年6月9日 05:14