鍍金池/ 問答/HTML/ antd 不用form onsubmit 如何完成必填項的校驗

antd 不用form onsubmit 如何完成必填項的校驗

我是這么寫的：

    <Modal
        title={<span className="AddManagement">新增設(shè)備</span>}
        visible={this.state.visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        footer=""http://會讓自帶的取消 確定 按鈕消失
    >
     <Form >
<FormItem
    label="設(shè)備類型編號"
    labelCol={{ span: 6 }}
    wrapperCol={{ span: 16 }}
>
    {getFieldDecorator('code', {
        rules: [{ required: true, message: '請輸入設(shè)備類型編號!' }],
    })(
        <Input />
    )}
</FormItem>
      <FormItem
    wrapperCol={{ span: 16, offset: 10 }}
>
    <Button type="primary" onClick={this.state.save？this.submit:this.putSubmit}>
        保存提交
    </Button>
</FormItem>
        </Form>
    </Modal>

現(xiàn)在的問題是 我在新增數(shù)據(jù)的時候沒有填入任何數(shù)據(jù)，點擊保存的時候向后臺發(fā)送，沒有觸發(fā)必填項的校驗，是因為我沒有用 onsubmit 事件的緣故嗎。
效果圖 ：圖片描述

回答
編輯回答
檸檬藍(lán)

不用，在handleOk函數(shù)時，可以做校驗!

 handleOk = (e) => {
        const self = this;
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                console.log(errors);
                return;
            };
          
            this.setState({
                visible: false,//關(guān)閉modal

            });
           //提交調(diào)的接口
        })


    };
2017年8月26日 11:02
編輯回答
陌上花

使用自定義校驗:

https://ant.design/components...

脫離 Form.create(), 然后在 render() 中執(zhí)行校驗函數(shù).

2017年5月26日 06:06
編輯回答
礙你眼

其實這個問題和onsubmit 沒有什么關(guān)系，是我自己學(xué)藝不精，要校驗必填選項，可以在方法中添加

function a (e){
    e.preventDefault();//***
    this.props.form.validateFields((err) => {//***
          if (err) {
              return;
          }
          axios();
 }
2017年2月12日 22:38