ReactJS में फ़ॉर्म डेटा प्राप्त करें

Question

मेरे renderकार्य में एक सरल रूप है , जैसे:

render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>
      );
    },
handleLogin: function() {
   //How to access email and password here ?
}

मुझे अपनी handleLogin: function() { ... }पहुंच Emailऔर Passwordक्षेत्रों में क्या लिखना चाहिए ?

Comments

@ लॉरेलन यह क्या बकवास है? पूछने वाला एसपीए का निर्माण कर सकता है और शायद यह नहीं चाहता कि फॉर्म सामान्य एचटीएमएल फॉर्म की तरह प्रस्तुत हो। यदि वे ऐसा चाहते थे तो वे एक कार्रवाई को परिभाषित करेंगे और ईवेंट हैंडलर को हटा देंगे।

— डेवलपर

नोट: आपको onSubmitबटन पर क्लिक करने के बजाय फ़ॉर्म को संभालना चाहिए - इस तरह से आप एंटर दबाकर फॉर्म सबमिट करने वाले उपयोगकर्ता को भी संभाल लेंगे।

— डेवलपर

एक <form>एक के साथ <button>या <input>के साथ type=submitप्रस्तुत किया जाएगा जब उपयोगकर्ता प्रेस प्रपत्र के में से किसी में दर्ज करें <input type=text>। यदि आप onClickएक बटन पर भरोसा करते हैं , तो उपयोगकर्ता को बटन पर क्लिक करना होगा या इसे फोकस करना होगा और Enter / Spacebar को दबाना होगा। उपयोग onSubmitकरने से दोनों मामलों का उपयोग किया जा सकेगा। जब फ़ॉर्म सबमिट करने के लिए समर्थन नहीं करते हैं, तो वे टूटा हुआ महसूस कर सकते हैं।

— रॉस एलन

Answer 1

changeघटक की स्थिति को अपडेट करने और उस तक पहुंचने के लिए इनपुट पर घटनाओं का उपयोग करें handleLogin:

handleEmailChange: function(e) {
   this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
   this.setState({password: e.target.value});
},
render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
          <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>);
},
handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
}

कार्य बेला ।

इसके अलावा, डॉक्स को पढ़ें, एक पूरा खंड है जो फॉर्म हैंडलिंग के लिए समर्पित है: फॉर्म

पहले आप रिएक्ट के दो-तरफ़ा डेटाबाइंडिंग हेल्पर मिक्सिन का उपयोग उसी चीज़ को प्राप्त करने के लिए कर सकते थे, लेकिन अब मूल्य और परिवर्तन हैंडलर को स्थापित करने के पक्ष में इसे हटा दिया गया है:

var ExampleForm = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {email: '', password: ''};
  },
  handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
  },
  render: function() {
    return (
      <form>
        <input type="text" valueLink={this.linkState('email')} />
        <input type="password" valueLink={this.linkState('password')} />
        <button type="button" onClick={this.handleLogin}>Login</button>
      </form>
    );
  }
});

प्रलेखन यहाँ है: दो-तरफ़ा बाइंडिंग हेल्पर्स ।

Comments

की कार्यक्षमता की सही नकल करने के लिए valueLink, आपके पहले उदाहरण valueमें इनपुट तत्वों को सेट करना चाहिए । इसके बिना, मान रिएक्ट शब्दों में "अनियंत्रित" हैं। <input ... value={this.state.password}>।

— रॉस एलन

तुम भी बटन के साथ onClick के बजाय फार्म के साथ एक onSubmit का उपयोग कर सकते हैं

— साई

फार्म के प्रत्येक तत्व के लिए एक राज्य का उपयोग क्यों किया जाता है? किसी और को लगता है कि यह एक बुरा पैटर्न है?

— एवेरेवन्स

ऐसा लगता है मान मान लिया गया है

— मैट

क्या यह क्लाइंट टेक्स्ट पर पूरे समय के लिए क्लियर टेक्स्ट में पासवर्ड स्टोर नहीं कर रहा है? यह पासवर्ड क्षेत्र के लिए वास्तव में उचित नहीं लगता है।

— NewbiZ

Answer 2

ऐसा करने के कुछ तरीके हैं:

1) सूचकांक द्वारा फार्म तत्वों की सरणी से मान प्राप्त करें

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target[0].value)
}

2) html में नाम विशेषता का उपयोग करना

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.elements.username.value) // from elements property
  console.log(event.target.username.value)          // or directly
}

<input type="text" name="username"/>

3) रेफ का उपयोग करना

handleSubmit = (event) => {
  console.log(this.inputNode.value)
}

<input type="text" name="username" ref={node => (this.inputNode = node)}/>

पूर्ण उदाहरण

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value)
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

Comments

यह एक शानदार जवाब है। ऐसा करने के लिए कई तरीके सूचीबद्ध करने के लिए धन्यवाद।

— ब्यू स्मिथ

विकल्प 2 मेरे लिए काम नहीं करता है। कोई संपत्ति "तत्व" या "उपयोगकर्ता नाम" नहीं है, भले ही मेरे इनपुट का नाम "उपयोगकर्ता नाम" है

— मैडाकोल

@ मेदाकोल ऐसा हो सकता है क्या आपके पास इसी नाम के साथ कुछ इनपुट हैं

— अलीकांदर सुशेविच

Answer 3

एक वैकल्पिक दृष्टिकोण refविशेषता का उपयोग करना और मूल्यों को संदर्भित करना है this.refs। ये रहा एक सरल उदाहरण:

render: function() {
    return (<form onSubmit={this.submitForm}>
        <input ref="theInput" />
    </form>);
},
submitForm: function(e) {
    e.preventDefault();
    alert(React.findDOMNode(this.refs.theInput).value);
}

अधिक जानकारी रिएक्ट डॉक्स में देखी जा सकती है: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

वर्णित कारणों से मैं रिएक्ट में रेडियो बटन का उपयोग कैसे करूं? यह दृष्टिकोण हमेशा सबसे अच्छा नहीं होता है, लेकिन यह कुछ सरल मामलों में एक उपयोगी विकल्प प्रस्तुत करता है।

Comments

क्या यह समाधान वास्तव में बेहतर है और प्रश्न समय पर उपलब्ध नहीं था, या यह एक "बदसूरत" तरीका है?

— वैगनर लियोनार्डी

वास्तव में आपको React.findDOMNode की आवश्यकता नहीं है। इस www.refs.theInput में पहले से ही एक html नोड है

— फरीद अलनामृती

Answer 4

रेफरी से निपटने का आसान तरीका:

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('-->', formData);
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleSubmit}>
            <input ref="phone" className="phone" type='tel' name="phone"/>
            <input ref="email" className="email" type='tel' name="email"/>
            <input type="submit" value="Submit"/>
          </form>
        </div>
    );
  }
}

export default UserInfo;

Comments

भविष्य में किसी दिन इस विधि को हटा दिया जाएगा। रेफरी केवल कॉलबैक और स्ट्रिंग्स के साथ उपयोग किए जाते हैं। अधिक जानकारी के लिए: facebook.github.io/react/docs/refs-and-the-dom.html

— David Labbe

ठंडा! :) मुझे इस तरह का उपयोग Object.keys()करना map()पसंद है:Object.keys(this.refs).map(field => formData[field] = this.refs[field].value)

— फ्रांसिस रोड्रिग्स

हाँ स्ट्रिंग रेफरी पदावनत हैं। इसे अभी करने का एक बेहतर तरीका है ऑनकॉन्ग कॉलबैक का उपयोग करना। यदि आप अभी भी रेफ्स का उपयोग करना चाहते हैं तो आप इस सिंटैक्स का उपयोग कर सकते हैं:<input type="text" ref={(input) => { this.textInput = input; }} />

— ई। फोर्ट्स

I @ E.Fortes, क्या आप कृपया ऑन-लाइन कॉलबैक विधि की व्याख्या कर सकते हैं? बहुत बहुत धन्यवाद अगर आप करेंगे कृपया मुझे टैग करें तो मुझे आपके उत्तर की सूचना दी जाएगी।

— सिमोना एड्रियानी

एक सरल तरीका होगा (कोड फॉर्मेटर काम नहीं करने के लिए खेद है): क्लास NameForm React.Component {कन्स्ट्रक्टर (प्रॉप्स) {सुपर (प्रॉप्स) का विस्तार करता है; this.state = {value: ''}; this.handleChange = this.handleChange.bind (यह); } handleChange (ईवेंट) {this.setState ({value: event.target.value}); } रेंडर () {रिटर्न (<फॉर्म> <लेबल> नाम: <इनपुट प्रकार = "टेक्स्ट" मान = {this.state.value} onChange = {this.handleChange} /> </ लेबल> </ form>); }}

— ई। फ़ोर्ट्स

Answer 5

माइकल शॉक के जवाब में जोड़ना:

class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    console.log(data.get('email')); // reference by form input's `name` tag

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label htmlFor="username">Enter username</label>
        <input id="username" name="username" type="text" />

        <label htmlFor="email">Enter your email</label>
        <input id="email" name="email" type="email" />

        <label htmlFor="birthdate">Enter your birth date</label>
        <input id="birthdate" name="birthdate" type="text" />

        <button>Send data!</button>
      </form>
    );
  }
}

इस मध्यम लेख को देखें: जस्ट रिएक्ट के साथ फॉर्म कैसे हैंडल करें

इस विधि से फॉर्म डेटा तभी मिलता है जब सबमिट बटन दबाया जाता है। बहुत क्लीनर IMO!

Comments

एकदम सही जवाब। 👌

— मीकल

Answer 6

आप onClickबटन पर ईवेंट हैंडलर को onSubmitफॉर्म पर एक हैंडलर पर स्विच कर सकते हैं :

render : function() {
      return (
        <form onSubmit={this.handleLogin}>
          <input type="text" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
          <button type="submit">Login</button>
        </form>
      );
    },

तब आप FormDataफॉर्म को पार्स करने के लिए उपयोग कर सकते हैं (और यदि आप चाहते हैं तो इसकी प्रविष्टियों से JSON ऑब्जेक्ट का निर्माण कर सकते हैं)।

handleLogin: function(e) {
   const formData = new FormData(e.target)
   const user = {}

   e.preventDefault()

   for (let entry of formData.entries()) {
       user[entry[0]] = entry[1]
   }

   // Do what you will with the user object here
}

Comments

इस प्लस को चलाने से 'कंसोल.लॉग (उपयोगकर्ता);' कोई उपयोगी मूल्य के साथ एक वस्तु देता है! कोई राय?

— एम

@MahdiRafatjah ¯ \ _ (_) _ / it - यह इस फिडेल में काम करता है: jsfiddle.net/mschock/exvko2Lf

— Michael Schock

मेरे एक मित्र ने मुझे दस्तावेज़ पर प्रतिक्रिया देने के लिए संदर्भित किया और वे इसे इस तरह कर रहे हैं जैसे कि reactjs.org/docs/forms.html#controlled-compenders

— M at

अच्छा, जो बहुत साफ लगता है =)

— माइकल शॉक

Answer 7

मैं निम्नलिखित दृष्टिकोण का सुझाव दूंगा:

import {Autobind} from 'es-decorators';

export class Form extends Component {

    @Autobind
    handleChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    @Autobind
    add(e) {
        e.preventDefault();
        this.collection.add(this.state);
        this.refs.form.reset();
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            <form onSubmit={this.add} ref="form">
                <input type="text" name="desination" onChange={this.handleChange}/>
                <input type="date" name="startDate" onChange={this.handleChange}/>
                <input type="date" name="endDate" onChange={this.handleChange}/>
                <textarea name="description" onChange={this.handleChange}/>
                <button type="submit">Add</button>
            </form>
        )
    }

}

Comments

यदि आप घटक को पुन: प्रस्तुत नहीं कर रहे हैं, तो आप वर्तमान स्थिति के अनुसार प्रत्येक तत्व का मूल्य कैसे निर्धारित कर सकते हैं? जैसे "मान = {this.state। मंजिल}"। यदि आप इसे फिर से

— रेंडर

Answer 8

यदि आपके सभी इनपुट / टेक्स्टारिया का नाम है, तो आप event.target से सभी फ़िल्टर कर सकते हैं:

onSubmit(event){
  const fields = Array.prototype.slice.call(event.target)
      .filter(el => el.name)
      .reduce((form, el) => ({
        ...form,
        [el.name]: el.value,
      }), {})
}

OnChange तरीकों, मूल्य, defaultValue के बिना पूरी तरह से अनियंत्रित रूप ed ...

Answer 9

उन लोगों के लिए जो OnChangeईवेंट के साथ रेफ का उपयोग करना और राज्य को रीसेट नहीं करना चाहते हैं , आप बस FormDataऑब्जेक्ट के माध्यम से सरल ऑनस्बमिट हैंडल और लूप का उपयोग कर सकते हैं । यह उदाहरण रिएक्ट हुक का उपयोग कर रहा है:

const LoginPage = () =>{
    const handleSubmit = (event) => {
        const formData = new FormData(event.target);
        event.preventDefault();
        for (var [key, value] of formData.entries()) {
            console.log(key, value);
        }
    }

    return (
        <div>
        <form onSubmit={
        handleSubmit
        }

        >
        <input type="text" name="username" placeholder="Email" />
        <input type="password" name="password"
        placeholder="Password" />
        <button type="submit">Login</button>
        </form>
        </div>)
        }

Comments

महान जवाब, लेकिन एक nitpick आप वर अन्यथा सही समाधान निकाल सकते हैं!

— लुई ३४

Answer 10

इसके अलावा, यह भी इस्तेमाल किया जा सकता है।

handleChange: function(state,e) {
  this.setState({[state]: e.target.value});
},
render : function() {
  return (
    <form>
      <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
      <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/>
      <button type="button" onClick={this.handleLogin}>Login</button>
    </form>
  );
},
handleLogin: function() {
  console.log("EMail: ", this.state.email);
  console.log("Password: ", this.state.password);
}

Comments

कृपया इस स्पष्टीकरण को शामिल करें कि यह उत्तर जाने का सही तरीका क्यों है।

— टिम हचिसन

मैं टेक्स्ट फॉर्म को बदलने के लिए केवल एक ही विधि का उपयोग करता हूं

— यूरी कोसीजीन

पासवर्ड को डेव टूल्स, सिक्योरिटी इश्यू के बिट में देखा जा सकता है?

— नील

Answer 11

अपना इनपुट इस तरह से दें

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

तब आप इसे अपने हैंडललॉग जैसे सो में एक्सेस कर सकते हैं

handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}

Answer 12

Es6 विनाशकारी के साथ अधिक स्पष्ट उदाहरण

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            login: null,
            password: null,
            email: null
        }
    }

    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onSubmit(e) {
        e.preventDefault();
        let login = this.state.login;
        let password = this.state.password;
        // etc
    }

    render() {
        return (
            <form onSubmit={this.onSubmit.bind(this)}>
                <input type="text" name="login" onChange={this.onChange.bind(this)} />
                <input type="password" name="password" onChange={this.onChange.bind(this)} />
                <input type="email" name="email" onChange={this.onChange.bind(this)} />
                <button type="submit">Sign Up</button>
            </form>
        );
    }
}

Answer 13

यदि आप अपने प्रोजेक्ट में Redux का उपयोग कर रहे हैं, तो आप इस उच्च आदेश घटक https://github.com/erikras/redux-form का उपयोग करने पर विचार कर सकते हैं ।

Answer 14

जावास्क्रिप्ट में कई घटनाओं में, हमारे पास eventएक वस्तु होती है जिसमें घटना क्या होती है और मूल्य क्या हैं, आदि शामिल हैं ...

यही कारण है कि हम ReactJs में रूपों के साथ भी उपयोग करते हैं ...

तो अपने कोड में आपने राज्य को नए मूल्य पर सेट किया है ... कुछ इस तरह:

class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(e) {
    e.preventDefault();
    for (const field in this.refs) {
      this.setState({this.refs[field]: this.refs[field].value});
    }
  }

  render() {
    return (
        <div>
          <form onSubmit={this.handleLogin}>
            <input ref="email" type="text" name="email" placeholder="Email" />
            <input ref="password" type="password" name="password" placeholder="Password" />
            <button type="button">Login</button>
          </form>
        </div>
    );
  }
}

export default UserInfo;

यह भी प्रतिक्रिया v.16 में फॉर्म का उदाहरण है, भविष्य में आपके द्वारा बनाए जा रहे फॉर्म के संदर्भ के रूप में:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Answer 15

मैं प्रतिक्रिया घटक राज्य का उपयोग करके इस तरह का उपयोग करता हूं:

<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}`

Answer 16

 onChange(event){
     console.log(event.target.value);
  }
  handleSubmit(event){ 
    event.preventDefault();
    const formData = {};
      for (const data in this.refs) {
        formData[data] = this.refs[data].value;
      }
    console.log(formData);
  }



 <form onSubmit={this.handleSubmit.bind(this)}>
  <input type="text" ref="username" onChange={this.onChange} className="form-control"/>
  <input type="text" ref="password" onChange={this.onChange} className="form-control"/>
  <button type="submit" className="btn-danger btn-sm">Search</button>
 </form>

आउटपुट इमेज यहां संलग्न है

Comments

कृपया एक स्पष्टीकरण भी प्रदान करें।

— ब्लैकबर्ड

मैं इसे समझाने की कोशिश करूंगा, जो मुझे शानदार लगा। हैंडलसुमिट () फ़ंक्शन में आप एक ऑब्जेक्ट (फॉर्मडाटा) का निर्माण कर रहे हैं जिसमें कुंजी फॉर्म में प्रत्येक इनपुट की 'रेफरी' विशेषता है ('फॉर्मडैट [डेटा] स्टेटमेंट), और मूल्य इनपुट का मूल्य है इस 'रेफरी' विशेषता ('this.refs [data] .value' स्टेटमेंट) के साथ। 'FormData [data] = this.refs [data] .value' के साथ आप इस ऑब्जेक्ट का निर्माण कर रहे हैं। आप सचमुच कह रहे हैं: फ़ॉर्मडाटा ['यूज़रनेम'] = (यूज़रनेम इनपुट का मान) और फॉर्मडाटा [(पासवर्ड ’] = (पासवर्ड इनपुट का मूल्य) आउटपुट होगा: {उपयोगकर्ता: abl ब्लाब्लाब्ला’, पासवर्ड: xxx '}

— सिमोना एड्रियानी

स्पष्टीकरण के लिए @SimonaAdriani धन्यवाद।

— मिलन पाणिग्रही

Answer 17

यह Meteor (v1.3) उपयोगकर्ताओं की मदद कर सकता है:

render: function() {
    return (
        <form onSubmit={this.submitForm.bind(this)}>
            <input type="text" ref="email" placeholder="Email" />
            <input type="password" ref="password" placeholder="Password" />
            <button type="submit">Login</button>
        </form>
    );
},
submitForm: function(e) {
    e.preventDefault();
    console.log( this.refs.email.value );
    console.log( this.refs.password.value );
}

Comments

this.submitForm.bind (यह) बस होना चाहिए: this.submitForm

— rekarnar

त्रुटि: स्टेटलेस फ़ंक्शन घटकों में Refs नहीं हो सकते।

— 1

क्या आप उल्का (v1.3) का उपयोग कर रहे हैं?

— जो एल

Answer 18

उपयोगकर्ता अनुभव में सुधार करने के लिए; जब उपयोगकर्ता सबमिट बटन पर क्लिक करता है, तो आप पहले संदेश भेजने के लिए फ़ॉर्म प्राप्त करने का प्रयास कर सकते हैं। एक बार जब हमें सर्वर से प्रतिक्रिया मिल जाती है, तो वह संदेश को तदनुसार अपडेट कर सकता है। हम इस स्थिति को प्राप्त करने के द्वारा प्रतिक्रिया में प्राप्त करते हैं। देखें codepen या स्निपेट नीचे:

निम्नलिखित विधि पहले राज्य में बदलाव करती है:

handleSubmit(e) {
    e.preventDefault();
    this.setState({ message: 'Sending...' }, this.sendFormData);
}

जैसे ही React उपरोक्त संदेश को स्क्रीन पर दिखाता है, यह उस विधि को कॉल करेगा जो फॉर्म डेटा को सर्वर पर भेजेगा: this.sendFormData ()। सादगी के लिए मैंने इसे नकल करने के लिए एक सेटटाइमआउट जोड़ा है।

sendFormData() {
  var formData = {
      Title: this.refs.Title.value,
      Author: this.refs.Author.value,
      Genre: this.refs.Genre.value,
      YearReleased: this.refs.YearReleased.value};
  setTimeout(() => { 
    console.log(formData);
    this.setState({ message: 'data sent!' });
  }, 3000);
}

प्रतिक्रिया में, यह method.setState () नए गुणों के साथ एक घटक प्रदान करता है। तो आप फॉर्म घटक के रेंडर () विधि में कुछ तर्क भी जोड़ सकते हैं जो सर्वर से मिलने वाली प्रतिक्रिया के प्रकार के आधार पर अलग-अलग व्यवहार करेगा। उदाहरण के लिए:

render() {
  if (this.state.responseType) {
      var classString = 'alert alert-' + this.state.type;
      var status = <div id="status" className={classString} ref="status">
                     {this.state.message}
                   </div>;
  }
return ( ...

codepen

Answer 19

यदि आपके पास एक तत्व नाम की कई घटनाएं हैं, तो आपको forEach () का उपयोग करना होगा।

एचटीएमएल

  <input type="checkbox" name="delete" id="flizzit" />
  <input type="checkbox" name="delete" id="floo" />
  <input type="checkbox" name="delete" id="flum" />
  <input type="submit" value="Save"  onClick={evt => saveAction(evt)}></input>

js

const submitAction = (evt) => {
  evt.preventDefault();
  const dels = evt.target.parentElement.delete;
  const deleted = [];
  dels.forEach((d) => { if (d.checked) deleted.push(d.id); });
  window.alert(deleted.length);
};

ध्यान दें कि इस मामले में dels एक RadioNodeList है, एक सरणी नहीं है, और एक Iterable नहीं है। ForEach () सूची वर्ग की एक अंतर्निहित पद्धति है। आप यहाँ एक मानचित्र () या कम () का उपयोग नहीं कर पाएंगे।

Answer 20

अद्यतन: आप अब फॉर्मिक को बाहरी पैकेज का उपयोग करने के लिए प्रतिक्रिया कर सकते हैं जो रूपों से निपटना इतना आसान बनाता है!

यहाँ शुरू करने के लिए लिंक है

https://jaredpalmer.com/formik