React를 사용하여 재료 UI 대화 상자에서 양식을 제출하는 방법JS

React를 사용하여 재료 UI 대화 상자에서 양식을 제출하는 방법JS

재료 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[ Dialog actions ]버튼:

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>

[ Dialog ](대화상자) 내에 <폼>을 넣을 수 있지만, [actions](액션) 속성 대신 {actions}을(를) 양식에 입력해야 합니다.Submit 액션 버튼에는 type="filename"이 표시되어 있어야 합니다(type="filename"도 지원되며 아래 표시됨).

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

HTML5의 경우form=""속성은 페이지의 모든 양식에 대한 참조로 사용할 수 있습니다.버튼은form="my-form-id"Atribute와 Form gets는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을 사용합니다.

대화 상자는 재료 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>

양식에 많은 필드가 있는 경우 대화상자의 부울을 사용하여 내용을 스크롤할 수 있도록 합니다.autoScrollBodyContent = {true}.

함수를 정의했습니다.this.handleSubmit.bind(this)submit 버튼을 클릭하면 이 함수 내에서 api를 호출하여 전송하려는 데이터를 전송하고 api 호출이 성공하면 대화상자를 닫습니다.

이것으로 당신의 문제나 당신이 원하는 다른 세부사항이 해결되면 코멘트를 주세요.

언급URL : https://stackoverflow.com/questions/40881616/how-to-submit-the-form-by-material-ui-dialog-using-reactjs