react class组件form表单遇到的问题

1.表单确认按钮点击事件验证

handleSubmit = e => {
            e.preventDefault();
            this.props.form.validateFields((err, values) => {
                  if (!err) {
                        console.log('Received values of form: ', values);
                  }
            });
      };

报错 ：Cannot read property 'validateFields' of undefined

解决办法：

class Home extends React.Component {
   .................
}

Home = Form.create({})(Home );  //加这行代码
export default Home ;

2.循环获得多个FormItem名称相同引起的问题

问题描述：

1.同名表单项的值共享，并且其中一个的值改变，另外的同名表单的值也一致改变
2.同名表单中，表单控件比如<Input />的onChange等事件会出现行为异常的情况

解决办法

<div>
	 <Form.Item label="名称">
	   {this.props.form.getFieldDecorator('name' + index)(  此处名称加索引
	     <Input />
	   )}
	 </Form.Item>
</div>
<div>
	 <Form.Item label="数值">
	   {this.props.form.getFieldDecorator('value' + index)(   //此处名称加索引
	     <Input onChange={() => { console.log('index:', index); }} />
	   )}
	 </Form.Item>
</div>

扩展反思

以上讨论的FormItem名称相同问题看似是个小问题，实际上很多情况如果不注意FormItem的名称唯一性，会造成很多问题，比如同名Item的值相互影响，以及以上所说的onChange行为异常（容易出错）。如果出现map渲染出多个表单时，可以利用名称+索引值使表单项名称唯一。
交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解 群号: 856402057
2、公众号：公众号「进军全栈攻城狮」

对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上，共勉！