鍍金池/ 問(wèn)答/HTML/ ant design同一個(gè)頁(yè)面上彈出的多個(gè)modal上的表單，如何實(shí)現(xiàn)分別自校驗(yàn)

ant design同一個(gè)頁(yè)面上彈出的多個(gè)modal上的表單，如何實(shí)現(xiàn)分別自校驗(yàn)

正在學(xué)習(xí)使用ant design的modal和表單，碰到一個(gè)問(wèn)題。

想要達(dá)到的效果是父頁(yè)面上有多個(gè)按鈕都需要彈出各自的Modal，每個(gè)Modal上有Form，有各自的驗(yàn)證內(nèi)容。

參考了官方例子寫了類似下面的代碼

父頁(yè)面中添加NewOneA和NewOneB兩個(gè)類：

saveAFormRef= (formRef) => {
        this.formRef = formRef;
}

saveBFormRef= (formRef) => {
        this.formRef = formRef;
}

render() {
    return(
        <NewOneA
            wrappedComponentRef={this.saveAFormRef}
            visible={visibleA}
            onCancel={this.handleCancelA}
            onOK={this.handleOKA}
        />
        <NewOneB
            wrappedComponentRef={this.saveBFormRef}
            visible={visibleB}
            onCancel={this.handleCancelB}
            onOK={this.handleOKB}
        />
    )
}

其中NewOneA 和 NewOneB都是在Modal中的表單
偽代碼：

<Modal
    visible={visible}
    title={title}
    onOk={onOK}
    onCancel={onCancel}
>
    <Form>
        <FormItem>
            {getFieldDecorator('author', {
               rules: [{ ... }],
            })(
               <Input />
            )}
        </FormItem>
    </Form>
</Modal>

因?yàn)樵诟疙?yè)面中，把NewOneA 和 NewOneB的formRef存到同一個(gè)this.formRef里了，所以無(wú)法正確使用validateFields方法進(jìn)行校驗(yàn)。

試了一下想把formRef存到兩個(gè)state里，比如：

 this.setState({ AformRef: formRef });

可是在其他方法里從this.state.AformRef 中取不到值，看來(lái)不可行。

請(qǐng)問(wèn)大家有什么思路可以解決這個(gè)問(wèn)題么？

回答
編輯回答
紓惘

我們公司寫法都是每個(gè)Modal一個(gè)組件，驗(yàn)證在各自的組件里邊做。

handleSubmit = () => {
    let adopt = false;
    this.props.form.validateFields(
      (err) => {
        adopt = !err;
      },
    );
    if (adopt) {...}
  };
2018年2月20日 19:55
編輯回答
毀了心

自己重新試了一下，用setState的方法應(yīng)該還是可行的。
在其他方法里用
this.state.AformRef.props.form 取值，就可以得到validateFields方法了

2017年4月28日 15:21