鍍金池/ 問答/HTML/ antdesign Button組件不在Form只內(nèi)怎么綁定提交?

antdesign Button組件不在Form只內(nèi)怎么綁定提交?

import React from 'react'
import { Form, Menu, Icon, Input, Select, Button, Row, Col, Tabs, } from 'antd'
import PropTypes from 'prop-types'
import './cs.sass'
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
class Cs extends React.Component {
    constructor(props) {
        super(props)

    }
    componentDidMount = () => {

    }
    formSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err,values)=>{
            console.log(values)
        })
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 2 },
            wrapperCol: { span: 22 },
        };

        return (
            <div>
                <div className={'topTitle'} >
                    <Icon type="setting" style={{ fontSize: 30 }} className={'leftIcon'} />
                    <span style={{ fontSize: 25 }} className={'leftText'} >用戶資料</span>

                    <Icon type="close-circle-o" style={{ fontSize: 25 }} className={'rightIcom'} />
                </div>
                <Row>
                    <Col span={4} >
                        <Menu className={'leftMenu'} >
                            <Menu.Item key='1' className={'leftMenuItem'} >基本信息</Menu.Item>
                            <Menu.Item key='2' className={'leftMenuItem'}>安全設(shè)置</Menu.Item>
                        </Menu>
                    </Col>
                    <Col span={19} style={{ marginLeft: 20 }}>
                        <Tabs className={'rightTitle'}>
                            <TabPane tab="基本信息" key="1" className={'rightContent'} >
                                <Form onSubmit={this.formSubmit}>
                                    <FormItem {...formItemLayout} label={'用戶名'}>
                                        {getFieldDecorator('userName', {
                                            // rules: [{ required: true, message: '請輸入用戶名'}],
                                            initialValue: '',
                                        })(
                                            <Input style={{ width: 300 }} />
                                            )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} label={'舊密碼'}>
                                        {getFieldDecorator('oldPassword', {
                                            initialValue: '',
                                        })(
                                            <Input style={{ width: 300 }} />
                                            )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} label={'新密碼'}>
                                        {getFieldDecorator('newPassword', {
                                            initialValue: '',
                                        })(
                                            <Input style={{ width: 300 }} />
                                            )}
                                    </FormItem>
                                    <FormItem {...formItemLayout} label={'確認(rèn)新密碼'}>
                                        {getFieldDecorator('confirmNewPassword', {
                                            initialValue: '',
                                        })(
                                            <Input style={{ width: 300 }} />
                                            )}
                                    </FormItem>
                                    <FormItem {...formItemLayout}>
                                        <Button type="primary" htmlType="submit">Register</Button>
                                    </FormItem>
                                </Form>
                            </TabPane>
                        </Tabs>
                    </Col>
                    <div className={'bottomBtns'}>
                        <Button className={'leftBtn'} >取消</Button>
                        <Button className={'rightBtn'} >保存</Button>
                    </div>
                </Row>
            </div>
        )
    }
}

export default Form.create()(Cs)

clipboard.png

我想用保存的這個按鈕來提交表單 我應(yīng)該怎么寫? 那個Register按鈕是好用的 但只是個測試

回答
編輯回答
毀了心

直接運(yùn)行這個this.props.form.validateFields就行了啊,這個可以隨時用

2017年5月3日 23:44