web-dev-qa-db-fra.com

Comment soumettre le formulaire par la boîte de dialogue Material UI à l'aide de ReactJS

J'ai utilisé la boîte de dialogue Material UI pour créer une liste de formulaires. Dans le cas officiel:

<Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          open={this.state.open}
        >
          This dialog spans the entire width of the screen.
</Dialog>

les actions sont:

   const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
      />,
    ];

Comment puis-je créer un formulaire et permettre à Dialog de soumettre mes données de formulaire?

------------------------------------------------MISE À JOUR- ----------------------------------------------

Il y a une autre réponse:

Ajoutez l'attribut type et form dans le bouton Actions de dialogue:

const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onTouchTap={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        onTouchTap={this.handleClose}
        type="submit"        //set the buttom type is submit
        form="myform"        //target the form which you want to sent 
      />,
    ];

et donnez l'ID d'attribut au formulaire dans la boîte de dialogue:

<Dialog
          title="Dialog With Custom Width"
          actions={actions}
          modal={true}
          open={this.state.open}
        >
        // here can put child component and the code still work even the form is in the child component
         <div className="deal_form">
          <form id="myform" onSubmit = {this.handleCreate} >
            <TextField value={this.state.staff_number} />
          </form>
        </div>
</Dialog>
javascriptreactjsmaterial-ui
15
Champer Wu

Vous pouvez mettre un <form> à l'intérieur de la boîte de dialogue, mais vous devez également mettre vos {actions} à l'intérieur du formulaire, au lieu de la propriété actions. Votre bouton d'action Soumettre devrait avoir le type = "soumettre" (le type = "réinitialiser" est également pris en charge et illustré ci-dessous).

jsFiddle: https://jsfiddle.net/14dugwp3/6/

const {
  Dialog,
  TextField,
  FlatButton,
  MuiThemeProvider,
  getMuiTheme,
} = MaterialUI;

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: true };
    this.handleClose = this._handleClose.bind(this);
  }

  _handleClose() {
    this.setState({ open: false });
  }

  render() {
    const actions = [
      <FlatButton
        type="reset"
        label="Reset"
        secondary={true}
        style={{ float: 'left' }}
        />,
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose}
        />,
      <FlatButton
        type="submit"
        label="Submit"
        primary={true}
        />,
    ];

    return (
      <Dialog
        title="Dialog With Custom Width"
        modal={true}
        open={this.state.open}
        >
        <form action="/" method="POST" onSubmit={(e) => { e.preventDefault(); alert('Submitted form!'); this.handleClose(); } }>
          This dialog spans the entire width of the screen.
          <TextField name="email" hintText="Email" />
          <TextField name="pwd" type="password" hintText="Password" />
          <div style={{ textAlign: 'right', padding: 8, margin: '24px -24px -24px -24px' }}>
            {actions}
          </div>
        </form>
      </Dialog>
    );
  }
}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme() }>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);
13
Jeff McCloud

En HTML5 form="" l'attribut peut être utilisé comme référence à n'importe quel formulaire sur une page. Donc, le bouton obtient form="my-form-id" l'attribut et le formulaire obtiennent id="my-form-id" attribut.

return (
  <Dialog
    open
    actions={[
      <RaisedButton type="submit" form="my-form-id" label="Submit" />
    ]}
  >
    <form id="my-form-id" onSubmit={handleSubmit(this.onSubmit)}>
      <TextField {...fields.username} floatingLabelText="Username" />
    </form>
  </Dialog>
);

J'utilise Material UI v0.20.

7
afschr

La boîte de dialogue est un composant d'interface utilisateur de l'interface utilisateur matérielle, elle ne soumettra pas automatiquement les données de votre formulaire.Si vous souhaitez créer un formulaire, définissez-la dans la boîte de dialogue comme ceci:

<Dialog
      title="Dialog With Custom Width"
      actions={actions}
      modal={true}
      open={this.state.open}
    >
      /*CREATE THE FORM UI HERE*/
      <div>Field1</div>
      <div>Field2</div>
      <div>Field3</div>
</Dialog>

Si le formulaire contient plusieurs champs, utilisez la bool dans la boîte de dialogue pour faire défiler le contenu autoScrollBodyContent = {true}.

Vous avez défini une fonction this.handleSubmit.bind(this) lors du clic sur le bouton Soumettre, à l'intérieur de cette fonction, appelez l'api et soumettez les données que vous souhaitez soumettre, une fois que l'appel api est réussi, fermez la boîte de dialogue.

Veuillez commenter si cela résout votre problème ou tout autre détail que vous souhaitez.

0
Mayank Shukla