import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Form, InputNumber, Input, DatePicker, Button, Select } from 'antd'; import moment from 'moment'; // 推薦在入口文件全局設置 locale import 'moment/locale/zh-cn'; moment.locale('zh-cn');const FormItem = Form.Item; const Option = Select.Option;// 后臺返回的數據格式 const data = [{'field': 'jobid','text': '工號','errorMessage': '請輸入工號','required': true,'type': 'int','value': 100},{'field': 'date','text': '日期','errorMessage': '請輸入日期','required': false,'type': 'date','value': '2017-10-20'},{'field': 'username','text': '用戶名','errorMessage': '請輸入用戶名','required': true,'type': 'char','value': 'hello world'},{'field': 'customer','text': '客戶','errorMessage': '請輸入客戶','required': true,'type': 'select','value': '中興','options': ['貝爾', '中興', '烽火']} ]// formItem css 樣式 const formItemLayout = {labelCol: {xs: { span: 24 },sm: { span: 6 },},wrapperCol: {xs: { span: 24 },sm: { span: 14 },} }// 保存按鈕 css 樣式 const tailFormItemLayout = {wrapperCol: {xs: {span: 24,offset: 0,},sm: {span: 14,offset: 6,},} }// form css 樣式 const formLayout = {width: 400,marginTop: 100,marginLeft: 'auto',marginRight: 'auto' }class App extends Component {handleSubmit(e) {e.preventDefault();this.props.form.validateFields((err, values) => {if (!err) {console.log('Received values of form: ', values);}});}/*** 根據后臺返回的 data 中 type 類型生成不同的組件* @param item json* @param Component*/switchItem(item) {const type = item.type;switch (type) {case 'int':return <InputNumber style={{ width: '100%' }} />;break;case 'char':return <Input />;break;case 'date':return <DatePicker style={{ width: '100%' }} />;break;case 'select':return (<Select>{item.options.map((option, index) => {return (<Option key={index} value={option}>{option}</Option>) })}</Select> )default:return <Input />;break;}}render() {const { getFieldDecorator } = this.props.form;return (<Form onSubmit={this.handleSubmit} style={formLayout}>{data.map((item, index) => {// type 為 date 日期格式需要強制轉化為 moment 格式item.value = item.type == 'date' ? moment(item.value, 'YYYY-MM-DD') : item.value;return (<FormItemkey={index}{...formItemLayout}label={item.text}hasFeedback>{getFieldDecorator(item.field, {initialValue: item.value,rules: [{required: item.required,message: item.errorMessage}],})(this.switchItem(item))}</FormItem> )})}<FormItem {...tailFormItemLayout}><Button type="primary" htmlType="submit">保存</Button></FormItem></Form> )} }const AppForm = Form.create()(App);ReactDOM.render(<AppForm />, document.getElementById('root'));

https://ant.design/components/form-cn/

Uncaught TypeError: Cannot read property 'props' of undefinedat handleSubmit (http://localhost:8088/js/app.js:78431:17)at HTMLUnknownElement.callCallback (http://localhost:8088/js/app.js:59422:14)at Object.invokeGuardedCallbackDev (http://localhost:8088/js/app.js:59461:16)at Object.invokeGuardedCallback (http://localhost:8088/js/app.js:59318:27)at Object.invokeGuardedCallbackAndCatchFirstError (http://localhost:8088/js/app.js:59332:43)at executeDispatch (http://localhost:8088/js/app.js:59716:19)at executeDispatchesInOrder (http://localhost:8088/js/app.js:59738:5)at executeDispatchesAndRelease (http://localhost:8088/js/app.js:59836:5)at executeDispatchesAndReleaseTopLevel (http://localhost:8088/js/app.js:59847:10)at Array.forEach (native)

解決方法：

constructor(props) {super(props);this.handleSubmit = this.handleSubmit.bind(this);}

?

轉載于:https://www.cnblogs.com/Nyan-Workflow-FC/p/8609477.html

總結

以上是生活随笔為你收集整理的react antd 动态表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。