Jak przesłać formularz przez Material UI Dailog przy użyciu ReactJS

Question

Użyłem okna dialogowego Material JE do utworzenia listy formularzy. W oficjalnym przypadku:

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

działań wynosi:

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

Jak mogę zbudować formę i niech Dialog mogą przesyłać swoje dane formularza?

Answer 1

Możesz umieścić <formularz> w oknie dialogowym, ale musisz również umieścić swoje {działania} w formularzu, zamiast właściwości akcji. Przycisk akcji przesyłania powinien mieć typ = "submit" (typ = "reset" jest również obsługiwany i pokazany poniżej).

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') 
); 

Answer 2

Dialog jest elementem ui materialnej ui, nie będzie automatycznie przesłać dane z formularza, jeśli chcesz utworzyć formularz, należy zdefiniować go wewnątrz Dialog tak:

<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> 

Jeśli formularz zawiera wiele pola następnie użyj okna dialogowego Bool w, aby treść przewijać się autoScrollBodyContent = {true}.

Zdefiniowałeś funkcję this.handleSubmit.bind(this) po kliknięciu przycisku Wyślij, wewnątrz tej funkcji wywołaj api i prześlij dane, które chcesz przesłać, gdy tylko połączenie api się powiedzie, zamknij okno dialogowe.

Prosimy o komentarz, jeśli to rozwiąże problem lub jakiekolwiek inne szczegóły, które chcesz.

Answer 3

HTML5 form="" atrybutu mogą być stosowane jako odnoszące się do wszelkich postaci na stronie. Przycisk ma atrybut form="my-form-id" i otrzymuje atrybut id="my-form-id".

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> 
); 

Używam Materiał UI v0.20.