13-3更换成getFieldDecorator后获取不到提交的数据

来源：

慕UI8284076

2017-03-06

import React from 'react';
/** Grid栅格 **/
import { Row, Col, Menu, Icon, Tag, message, Form, Input, Button, Checkbox, Modal, Tabs } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

class PCHeader extends React.Component {
constructor(){
super();
this.state = {
current: 'top', // 哪个菜单默认显示
modalVisible: false, // 模态框默认是否显示
action: 'login', // 按钮用来做登录还是注册
hasLogined: false, // 是否已经登录了
userNickName: '', // 用户登录之后的昵称
userId: 0, // 用户ID
};
};
setModalVisible(value){
this.setState({modalVisible: value});
};
handleSubmit(e){
e.preventDefault();
var myFetchOptions = {
method: 'GET',
};

  var formData = this.props.form.getFieldsValue();
  console.log(formData);

fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=register&username=username&password=password"
+ "&r_userName=" + formData.r_userName + "&r_password="
+ formData.r_password + "&r_confirmPassword="
+ formData.r_confirmPassword, myFetchOptions)
.then(response => response.json())
.then(json => {
this.setState({
userNickName: json.NickUserName,
userId: json.UserId
});
message.success('请求成功');
this.setModalVisible(false);
});
};
handleClick(e){
this.setState({current: e.key});
if (e.key === 'register') {
this.setModalVisible(true);
}
};
render(){

    const { getFieldDecorator } = this.props.form;

const userShow = this.state.hasLogined
? <Menu.Item key="logout" className="register">
<Button type="primary" htmlType="button">{this.state.userNickName}</Button>  
<Link target="_blank"> {/* Link是路由跳转 */}
<Button type="dashed" htmlType="button">个人中心</Button>
</Link>  
<Button type="default" htmlType="button">退出</Button>
</Menu.Item>
: <Menu.Item key="register" className="register">
<Icon type="appstore" />注册/登录
</Menu.Item>;
return (
<header className="header">
<Row>
<Col span={2}></Col>
<Col span={4}>
<a className="logo" href="/">
<img src="./src/images/logo.png" alt="logo" />
<span className="logo-text">ReactNews</span>
</a>
</Col>
<Col span={16}>
<Menu mode="horizontal" defaultSelectedKeys={[this.state.current]} onClick={this.handleClick.bind(this)}>
<Menu.Item key="top">
<Icon type="appstore" />头条
</Menu.Item>
<Menu.Item key="shehui">
<Icon type="appstore" />社会
</Menu.Item>
<Menu.Item key="guonei">
<Icon type="appstore" />国内
</Menu.Item>
<Menu.Item key="guoji">
<Icon type="appstore" />国际
</Menu.Item>
<Menu.Item key="yule">
<Icon type="appstore" />娱乐
</Menu.Item>
<Menu.Item key="tiyu">
<Icon type="appstore" />体育
</Menu.Item>
<Menu.Item key="keji">
<Icon type="appstore" />科技
</Menu.Item>
<Menu.Item key="shishang">
<Icon type="appstore" />时尚
</Menu.Item>
{userShow}
</Menu>
<Modal title="用户中心" wrapClassName="vertical-center-modal" visible={this.state.modalVisible}
onCancel={this.setModalVisible.bind(this, false)}
onOk={this.setModalVisible.bind(this, false)} okText="关闭">
<Tabs type="card">
<TabPane tab="注册" key="2">
<Form vertical={true} onSubmit={this.handleSubmit.bind(this)}>

              <FormItem label="账户"><Input placeholder="请输入用户名" {...getFieldDecorator('r_username')} /></FormItem>
              <FormItem label="密码"><Input type="password" placeholder="请输入您的密码" {...getFieldDecorator('r_password')} /></FormItem>
              <FormItem label="确认密码"><Input type="password" placeholder="请再次输入密码" {...getFieldDecorator('r_confirmPassword')} /></FormItem>

<Button type="primary" htmlType="submit">注册</Button>
</Form>
</TabPane>
</Tabs>
</Modal>
</Col>
<Col span={2}></Col>
</Row>
</header>
);
};
}

export default PCHeader = Form.create()(PCHeader); // Form要求用create()进行二次封装

写回答

2回答

Nuono

2017-03-17

已采纳

根据文档改的，还没看完这章没验证，先来回答下：

<Form layout="horizontal" onSubmit={this.handleSubmit.bind(this)}>
<FormItem label="账户">
{getFieldDecorator('r_userName')(
<Input placeholder="请输入您的账户"/>
)}
</FormItem>
<FormItem label="密码">
{getFieldDecorator('r_password')(
<Input type="password" placeholder="请输入您的密码"/>
)}
</FormItem>
<FormItem label="确认密码">
{getFieldDecorator('r_confirmPassword')(
<Input type="password" placeholder="请再次输入你的密码"/>
)}
</FormItem>
<Button type="primary" htmlType="submit">注册</Button>
</Form>