ReactJSを使用してMaterial UI Dailogでフォームを送信する方法

Question

Material UIダイアログを使用してフォームリストを作成しました。公式の場合：

<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} 
     />, 
    ]; 

どのようにフォームを作成し、ダイアログは私のフォームデータを提出することができましょうか？

Answer 1

<フォーム>をダイアログに入れることができますが、actionsプロパティの代わりに{actions}をフォーム内に配置する必要があります。 Submitアクションボタンにはtype = "submit"が必要です（type = "reset"もサポートされています）。

jsFiddle：HTML5 form=""属性で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

ダイアログが材料のUIのUIコンポーネントであり、それは自動的にフォームデータを提出していないだろう、あなたはフォームを作成したい場合は、このようなダイアログ内でそれを定義します。フォームは、多くのフィールドが含まれている場合は

<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

は、ページ上の任意の形態を参照として使用することができます。ボタンは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を使用します。