web-dev-qa-db-ja.com

ReactJSを使用してマテリアルUIダイアログでフォームを送信する方法

マテリアル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}
      />,
    ];

フォームを作成し、Dialogがフォームデータを送信できるようにするにはどうすればよいですか？

- - - - - - - - - - - - - - - - - - - - - - - - 更新- ----------------------------------------------

別の答えがあります：

ダイアログアクションボタンでtypeおよびformの属性を追加します。

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

そして、ダイアログ内のフォームに属性IDを与えます：

<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

Dialog内に<form>を配置できますが、actionsプロパティの代わりに、フォーム内に{actions}も配置する必要があります。 [送信]アクションボタンにはtype = "submit"が含まれている必要があります（type = "reset"もサポートされています。以下を参照）。

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

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

Material UI v0.20を使用します。

7
afschr

Dialogは、マテリアルuiのuiコンポーネントです。フォームデータを自動的に送信することはありません。フォームを作成する場合は、Dialog内で次のように定義します。

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

フォームに多くのフィールドが含まれている場合は、ダイアログでブールを使用して、コンテンツをスクロール可能_autoScrollBodyContent = {true}_にします。

送信ボタンのクリックで関数this.handleSubmit.bind(this)を定義しました。この関数内でAPIを呼び出し、送信するデータを送信します。API呼び出しが成功したら、ダイアログボックスを閉じます。

これで問題やその他の詳細が解決される場合はコメントしてください。

0
Mayank Shukla