Как отправить форму по материалу UI Dailog с помощью ReactJS

Question

Я использовал диалоговое окно Material UI Dialog, чтобы составить список форм. В официальном случае:

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

действия является:

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

Как я могу создать форму, и пусть Dialog может представить свои данные формы?

Answer 1

В диалоговом окне вы можете поместить < форму >, но вы также должны поместить свои {действия} в форму, а не в свойство actions. Кнопка «Отправить действие» должна иметь тип = «отправить» на нее (тип = «сброс» также поддерживается и показан ниже).

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

Если форма содержит много поля затем используйте диалог bool, чтобы сделать контент прокручиваемым autoScrollBodyContent = {true}.

Вы определили функцию this.handleSubmit.bind(this) на кнопке отправки, нажмите, внутри этой функции вызовите api и отправьте данные, которые вы хотите отправить, после успешного вызова api, закройте диалоговое окно.

Прокомментируйте это, если это решит вашу проблему или любые другие детали, которые вы хотите.

Answer 3

В HTML5 form="" атрибут может быть использован в качестве ссылки на какой-либо форме на странице. Таким образом, кнопка получает атрибут form="my-form-id", а форма получает атрибут 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> 
); 

Я использую UI материала v0.20.