form 表单结构 获取页面数据 antd

//默认值
initialValue    defaultValue
 <Form.Item label="项目编码：">
   <Select defaultValue={record.id} sstyle={{ width: '100%' }} >
   		 <Option value={record.id}>{record.id}</Option>
    </Select>
  </Form.Item>
  
  <Form.Item label="项目编码：">
     {getFieldDecorator('task_code', {
		      initialValue: record.id|| '',
		       })(
		       <Select  sstyle={{ width: '100%' }} disabled>
		         <Option value={record.id}>{record.id}</Option>
		       </Select>
       )}
     </Form.Item>

//取值
Input > onChange(e) >  aaa=>(e)={值 = e.target.value}
<Input onChange = {(e) = {this.aaa(e)}} />

InputNumber > onChange(e) >  aaa=>(value)={值 = value }
<InputNumber onChange={(value)=>{this.aaa(value)}} min={0} precision={2}/>


//获取某一个表单里的值
this.props.form.getFieldValue("name")

//代码中需要注意，以下情况会和异步一样，但是不是异步
//我们都知道this.setState是异步的，在setState里的回调函数可以解决异步

//例子：
// 在state里存了一个name
// name 和一个input里的值关联（绑定）
0 	this.state = {
0		name:""
0	}
0	//onChange里边传值value
1	onChange =(value)=>{
2		let {name} = this.state;
3		//""
4		console.log(name);
5		//""
6		console.log(this.state.name);
7		//"" 因为value还没有赋值给name
8		console.log(this.props.form.getFieldValue("name"));
9		this.setState({
10			name:value
11		},()=>{
12			//回调函数解决异步
13			//！！！！！！！重点！！！！！！！
14			//当你以为你第二行结构过了之后，这里拿到的应该是最新值，
15			//但是，name和this.state.name的值是不一样的，
16			//是因为，代码先走的第二行，name被结构出来了，
17			//然后第九行执行setState，this.state.name的值被改变，
18			//但是却不会改变第二行那个name，这里取的name是第二行setState之前的被解构出来的值
19			console.log(name);
20			//最新值， 因为回调函数可以解决异步
21			console.log(this.state.name);
22			//最新值， 因为回调函数可以解决异步
23			console.log(this.props.form.getFieldValue("name"));
24		})
25		//“” this.setState 异步拿不到最新数据
26		console.log(name);
27		//“” this.setState 异步拿不到最新数据
28		console.log(this.state.name);
29		//“” this.setState 异步拿不到最新数据
30		console.log(this.props.form.getFieldValue("name"));
31	}
32


// 如何取组件内部的this.props.from
//SearchPanel 是自定义组件
//! wrappedComponentRef  			//form1 是组件里边所有的this  
								   //this绑定一个属性from2，form1赋值给from2这个属性 
 <SearchPanel  wrappedComponentRef={(form1) => { return this.form2 = form1}}/>
 <SearchPanel  wrappedComponentRef={(form) => { return this.form = form}}/>
//这个组件取form值就是
// validateFields	第一个参数是错误信息  if (err) {reruen false}	第二个参数是页面上所有表单的值
// validateFieldsAndScroll 	与 validateFields 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围
this.form.props.form.validateFields((err1,values1) => {
	console.log(err1,values1)
})
//这个页面取form的值是
this.props.form.validateFields((err,values)=>{
	console.log(err,values)
})



//@Form.create()
let {getFieldDecorator} = this.props.form
//getFieldDecorator 用于和表单进行双向绑定
  
//labelAlign 文字对齐方式
//colon  是否显示冒号
 <Form {...formItemLayout} labelAlign="left"  >	
	 <Form.Item label="项目编码" colon={true}>
		   {getFieldDecorator('project_id', {
		 		// rules: ([{ required: true, message: '请选择部门' }]),
		   })(
		     <Input placeholder="请输入项目编码" />
		   )}
	 </Form.Item>
 </Form>


//重置
<Button style={{marginLeft:"30px",display:"inline-block"}} onClick={()=>{this.props.form.resetFields()}}>重置</Button>


  const formItemLayout = {
      // 控制label文字的,下边是控制输入框的长度，两个加在一起等于24  = Col={8} offset 向右移动多少个格子
      labelCol: {
        xs: { span: 5,offset:1 },
        sm: { span: 5,offset:1 },
        md: { span: 5,offset:1 },
      },
      wrapperCol: {
        xs: { span: 14,offset:2  },
        sm: { span: 14,offset:2  },
        md: { span: 14 ,offset:2 },
      },
    };
    //结构
    Fragment > Card > Form ...formItemLayout > Row("一个！一个row是24span") > Col span={8} > Form.Item
    
      <Fragment>
        <Card style={{borderBottom:"1px solid #E9E9E9"}} bordered={false}>
           <Form {...formItemLayout} labelAlign="left"  >
            <Row>
              <Col span={8}>
                <Form.Item label="项目编码:">
                  {getFieldDecorator('project_id', {
                    // rules: ([{ required: true, message: '请选择部门' }]),
                  })(
                    <Input placeholder="请输入项目编码" />
                  )}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="任务编码:">
                  {getFieldDecorator('projectName', {
                    // rules: ([{ required: true, message: '请选择部门' }]),
                  })(
                    <Input placeholder="请输入项目名称" />
                  )}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item>
                  <Button type="primary" style={{display:"inline-block"}} onClick={()=>{this.query()}}>查询</Button>
                  <Button style={{marginLeft:"30px",display:"inline-block"}} onClick={()=>{this.props.form.resetFields()}}>重置</Button>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="任务类目:">
                  {getFieldDecorator('projectCode11', {
                    // rules: ([{ required: true, message: '请选择部门' }]),
                  })(
                  <Select placeholder="请选择" >
                    <Option value="jack">Jack</Option>
                    <Option value="lucy">Lucy</Option>
                    <Option value="Yiminghe">yiminghe</Option>
                  </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="分包归属:">
                  {getFieldDecorator('projectName11', {
                    // rules: ([{ required: true, message: '请选择部门' }]),
                  })(
                    <Select placeholder="请选择" >
                      <Option value="jack">Jack</Option>
                      <Option value="lucy">Lucy</Option>
                      <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
            </Row>

            <Row>
              <Col span={8}>
                <Title>任务包详情</Title>
              </Col>
              <Col span={8} offset={8}>
                <Button icon="plus" type="primary"  style={{float:"right",marginRight:"20px"}} onClick={()=>{this.build_showModal("新建打包任务")}}>新建</Button>
              </Col>
            </Row>
          </Form>
        </Card>
        <Card bordered={false}>
          {/* position */}
        <Table  dataSource={dataSource}
                columns={columns}
                pagination={{
                  ...this.state.pagination
                }}
                onChange={this.pageNumberChange}
                rowKey={(_,index)=>index}
                />
        </Card>

      </Fragment>