ReactJS

Question

का उपयोग कर सामग्री UI Dailog द्वारा फ़ॉर्म को सबमिट करने के लिए मैंने फ़ॉर्म सूची बनाने के लिए सामग्री 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

आप डायलॉग के अंदर < फॉर्म > डाल सकते हैं, लेकिन आपको कार्यवाही की बजाय अपने {क्रिया} फ़ॉर्म को भी अंदर रखना होगा। आपके सबमिट एक्शन बटन में टाइप = "सबमिट" होना चाहिए (टाइप = "रीसेट" भी समर्थित है, और नीचे दिखाया गया है)।

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

संवाद, सामग्री 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) पर फ़ंक्शन को परिभाषित किया है, इस फ़ंक्शन के अंदर एपीआई कॉल करें और वह डेटा सबमिट करें जिसे आप सबमिट करना चाहते हैं, एक बार एपीआई कॉल सफलतापूर्वक हो, तो डायलॉग बॉक्स बंद करें।

कृपया टिप्पणी करें कि क्या यह आपकी समस्या या आपके इच्छित अन्य विवरण हल करता है।

Answer 3

एचटीएमएल 5 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 का उपयोग करता हूं।