web-dev-qa-db-fra.com

Comment soumettre un composant de formulaire dans un dialogue modal à l'aide de la bibliothèque de composants antd react

Dans la méthode de rendu de mon composant, j'ai antd Component modal en tant que parent et antd Composant Form en tant qu'enfant:

    render() {
        const myForm = Form.create()(AddNewItemForm);
        ...
        return (
            ...
            <Modal
                title="Create new item"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                wrapClassName="vertical-center-modal"
                okText="Save new item"
                width="600"
            >
                <myForm />
            </Modal>
...

Comment puis-je envoyer mon formulaire en cliquant sur le bouton Enregistrer les modifications?

reactjsantd
7
vladimirp

Ma solution consistait à intégrer le dialogue modal et les composants de formulaire dans un nouveau composant parent d'encapsuleur dans lequel je valide le composant de formulaire enfant dans la méthode handleCreate. J'ai utilisé l'attribut ref pour référencer le composant enfant myForm dans le composant FormOnModalWrapper. Je suis en train de transmettre les gestionnaires parents via des accessoires du composant parent wrapper à l'occurrence de composant myForm.

class FormOnModalWrapper extends React.Component {
...
    constructor(props) {
        this.state =
        {
            visible: false
            ....
        }

...
    showModal = () => {
        this.setState({
            visible: true,
        });
    }

    handleCreate = () => {
        const form = this.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            console.log('Received values of form: ', values);
            form.resetFields();
            this.setState({ visible: false });
        });
    }

    saveFormRef = (form) => {
        this.form = form;
    }

render() {
...
    const myForm= Form.create()(CrateNewItemFormOnModal);
...
    return (
      <div>
            <Button onClick={this.showModal}>Add</Button>
            <myForm
                visible={this.state.visible}
                onCancel={this.handleCancel}
                onCreate={this.handleCreate}
                ref={this.saveFormRef}
            />
      </div>
     );
}

Dans la classe de composants CrateNewItemFormOnModal, j'ai un composant de dialogue modal en tant que parent et un composant de formulaire en tant qu'enfant:

export default class AddNewItemForm extends React.Component {

render() {
    ...
    const { visible, onCancel, onCreate, form } = this.props;
    ...
    return (
        <Modal
           title="Create new item"
           visible={visible}
           onOk={onCreate}
           onCancel={onCancel}
           okText="Create"
        >
          <Form>
            ...
          </Form>
        </Modal>
    );
}
5
vladimirp

Vous pouvez étudier l'exemple officiel: https://ant.design/components/form/#components-form-demo-form-in-modal

3
benjycui

Il existe une nouvelle solution qui semble beaucoup plus propre: 

<Form id="myForm">

...

<Modal
    ...
    footer={[
        <Button form="myForm" key="submit" htmlType="submit">
            Submit
        </Button>
        ]}
>
    <CustomForm />
</Modal>

Cela fonctionne à cause de l'attribut form du Button. Support du navigateur

Auteur de la solution originale: https://github.com/ant-design/ant-design/issues/9380

1
sensor

Ma solution a été de désactiver le pied de page du modal et de créer mon propre bouton d'envoi:

<Modal footer={null}>
  <Form onSubmit={this.customSubmit}>
    ...
    <FormItem>
      <Button type="primary" htmlType="submit">Submit</Button>
    </FormItem>
  </Form>
</Modal>

Pas besoin d'envelopper le modal avec cette solution.

0
JacopoStanchi