Question

form设置的数据怎么添加到table

Answer 1

页面代码：

编辑跳转表单的代码：
<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="[结束]">[结束交易] </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)