प्रतिक्रिया

Question

में बाल घटकों से मूल्य कैसे प्राप्त करें, इसलिए मैं अभी प्रतिक्रिया का उपयोग करना शुरू कर रहा हूं और मुझे बाल घटक के भीतर इनपुट के इनपुट मान एकत्र करने में परेशानी हो रही है। असल में, मैं एक बड़े रूप के लिए अलग-अलग घटक बना रहा हूं, फिर मैं घटक बना रहा हूं, मैं किसी ऑब्जेक्ट में बच्चों के इनपुट के सभी मूल्य एकत्र करना चाहता हूं, मैं डेटा कॉल कर रहा हूं, और उसके बाद उस एकत्रित इनपुट को POST में भेजना चाहता हूं AJAX अनुरोध (आप मेरे द्वारा बनाए गए अंतिम घटक में एक उदाहरण देख सकते हैं)। जब मैं घटकों के अंदर हूं, तो मैं आसानी से मूल्यों को खींच सकता हूं, लेकिन उन्हें मूल घटक से खींच रहा हूं, मुझे पता नहीं चला है।

अग्रिम धन्यवाद। प्रतिक्रिया के साथ अभी पीड़ा से गुज़रना, इसलिए इस बेहतर तरीके से संरचना करने के तरीके पर कोई भी सिफारिशें, मैं सभी कान हूं!

यहाँ मेरी घटक हैं:

घटक एक

var StepOne = React.createClass({ 
    getInitialState: function() { 
    return {title: '', address: '', location: ''}; 
    }, 
    titleChange: function(e) { 
    this.setState({title: e.target.value}); 
    }, 
    addressChange: function(e) { 
    this.setState({address: e.target.value}); 
    }, 
    locationChange: function(e) { 
    this.setState({location: e.target.value}); 
    }, 
    render: function() { 
    return (
     <div className="stepOne"> 
     <ul> 
      <li> 
      <label>Title</label> 
      <input type="text" value={this.state.title} onChange={this.titleChange} /> 
      </li> 
      <li> 
      <label>Address</label> 
      <input type="text" value={this.state.address} onChange={this.addressChange} /> 
      </li> 
      <li> 
      <label>Location</label> 
      <input id="location" type="text" value={this.state.location} onChange={this.locationChange} /> 
      </li> 
     </ul> 
     </div> 
    ); 
    }, // render 
}); // end of component 

घटक दो

var StepTwo = React.createClass({ 
    getInitialState: function() { 
    return {name: '', quantity: '', price: ''} 
    }, 
    nameChange: function(e) { 
    this.setState({name: e.target.value}); 
    }, 
    quantityChange: function(e) { 
    this.setState({quantity: e.target.value}); 
    }, 
    priceChange: function(e) { 
    this.setState({price: e.target.value}); 
    }, 
    render: function() { 
    return (
     <div> 
     <div className="name-section"> 
     <div className="add"> 
      <ul> 
      <li> 
       <label>Ticket Name</label> 
       <input id="name" type="text" value={this.state.ticket_name} onChange={this.nameChange} /> 
      </li> 
      <li> 
       <label>Quantity Available</label> 
       <input id="quantity" type="number" value={this.state.quantity} onChange={this.quantityChange} /> 
      </li> 
      <li> 
       <label>Price</label> 
       <input id="price" type="number" value={this.state.price} onChange={this.priceChange} /> 
      </li> 
      </ul> 
     </div> 
     </div> 
     </div> 
    ); 
    } 
}); 

अंतिम घटक डेटा ajax अनुरोध को इकट्ठा करने और

EventCreation = React.createClass({ 
getInitialState: function(){ 
    return {} 
}, 
submit: function (e){ 
    var self 

    e.preventDefault() 
    self = this 

    var data = { 
    // I want to be able to collect the values into this object then send it in the ajax request. I thought this sort of thing would work below: 
    title: this.state.title, 
    } 

    // Submit form via jQuery/AJAX 
    $.ajax({ 
    type: 'POST', 
    url: '/some/url', 
    data: data 
    }) 
    .done(function(data) { 
    self.clearForm() 
    }) 
    .fail(function(jqXhr) { 
    console.log('failed to register'); 
    }); 
}, 
render: function() { 
    return(
     <form> 
     <StepOne /> 
     <StepTwo /> 
     // submit button here 
     </form> 
    ); 
    } 
}); 

Answer 1

पहले प्रस्तुत करने के लिए, आप जरुरत कुछ references सेट करने के लिए। यह आपको आसानी से कुछ डीओएम तत्वों तक पहुंचने की अनुमति देगा। पूर्व:

<input id="name" type="text" value={this.state.ticket_name} onChange={this.nameChange} ref="stepOneName"/> 

फिर, अपने submit विधि में, आप इसे वापस सिर्फ इस तरह प्राप्त कर सकते हैं:

var data = { 
name: this.refs.stepOneName.value 
} 

संपादित करें 1: तुम भी अपने घटकों के लिए एक ref जोड़ने के लिए:

प्रस्तुत करें: फ़ंक्शन() { वापसी ( // सबमिट बटन यहां ); } एक तो, अपने तत्व के लिए उपयोग:

var data = { 
    name: this.refs.steOneRef.refs.stepOneName.value 
    } 

I JSFiddled your code चींटी यह मेरे लिए ठीक लगता है।

Answer 2

बाल घटकों में विधियों को परिभाषित करें जो आपके इच्छित डेटा को वापस लौटाते हैं और फिर जब आप बच्चों को प्रतिपादित करते हैं तो मूल घटक में, बाद में रेफरी को परिभाषित करते हैं जब आप जिस डेटा को आप चाहते हैं उसे पुनर्प्राप्त करना चाहते हैं तो आप उन विधि को कॉल कर सकते हैं बच्चों पर

StepOne = React.createClass({ 
    getData: function() { 
     return this.state; 
    } 
}); 

StepTwo = React.createClass({ 
    getData: function() { 
     return this.state; 
    } 
}); 

EventCreation = React.createClass({ 
    submit: function() { 
     var data = Object.assign(
      {}, 
      this._stepOne.getData(), 
      this._stepTwo.getData() 
     ); 

     // ... do AJAX 
    }, 

    render: function() { 
     return (
      <StepOne ref={(ref) => this._stepOne = ref} /> 
      <StepTwo ref={(ref) => this._stepTwo = ref} /> 
     ); 
    } 
}); 

Answer 3

आम तौर पर, आप माता-पिता से एक प्रोप के रूप में बच्चों को एक समारोह को पास करना चाहते हैं। जब बच्चों का डेटा बदलता है, तो वे उस फ़ंक्शन को कॉलबैक के रूप में कॉल करेंगे।

इसका आपके बड़े घटक को आपके आवेदन में सभी राज्यों का ट्रैक रखने और अपने घटकों के रूप में राज्य के स्लाइस को पास करने का बड़ा लाभ है, प्रत्येक घटक को अपने आंतरिक राज्य का ट्रैक रखने के बजाय। (That's the React approach to data flow।)

आपका घटकों कुछ इस तरह दिख सकता है:

var StepOne = React.createClass({ 
    handleOnChange: function(e){ 
    this.props.handleChange(e.target.name, e.target.value); 
    },  
    render: function() { 
    return (
     <div className="stepOne"> 
     <ul> 
      <li> 
      <label>Title</label> 
      <input type="text" name="title" value={this.props.title} onChange={this.handleChange} /> 
      </li> 
      ... 
     </ul> 
     </div> 
    ); 
    }, // render 
}); // end of component 

EventCreation = React.createClass({ 
getInitialState: function(){ 
    return {} 
}, 
handleChange: function(name, value){ 
    var tmp = {}; 
    tmp[name] = value; 
    this.setState(tmp); 
}, 
submit: function (e){ 
    var self 

    e.preventDefault() 
    self = this 

    var data = { 
    // I want to be able to collect the values into this object then send it in the ajax request. I thought this sort of thing would work below: 
    title: this.state.title, 
    } 

    // Submit form via jQuery/AJAX 
    $.ajax({ 
    type: 'POST', 
    url: '/some/url', 
    data: data 
    }) 
    .done(function(data) { 
    self.clearForm() 
    }) 
    .fail(function(jqXhr) { 
    console.log('failed to register'); 
    }); 
}, 
render: function() { 
    return(
     <form> 
     <StepOne handleChange={this.handleChange.bind(this)} title={this.state.title} .../> 
     <StepTwo handleChange={this.handleChange.bind(this)} ... /> 
     // submit button here 
     </form> 
    ); 
    } 
}); 

Answer 4

यहाँ एक कुछ और अधिक शिथिल युग्मित समाधान है। यह प्रत्येक तत्व के लिए id सेट करने पर निर्भर करता है। असल में आप जो कर रहे हैं वह माता-पिता घटक onChange फ़ंक्शन को कॉल कर रहा है जो डेटा प्राप्त और सेट करेगा।

var StepOne = React.createClass({ 
    getInitialState: function() { 
    return {title: '', address: '', location: ''}; 
    }, 
    _onChange(e) { 
    // set your state if needed 

    // call the parent function 
    this.props.onChange(
     e.target.id, 
     e.target.value 
    ) 
    }, 
    render: function() { 
    return (
     <div className="stepOne"> 
     <ul> 
      <li> 
      <label>Title</label> 
      <input id="title" type="text" value={this.state.title} onChange={this._onChange.bind(this)} /> 
      </li> 
      <li> 
      <label>Address</label> 
      <input id="address" type="text" value={this.state.address} onChange={this._onChange.bind(this)} /> 
      </li> 
      <li> 
      <label>Location</label> 
      <input id="location" type="text" value={this.state.location} onChange={this._onChange.bind(this)} /> 
      </li> 
     </ul> 
     </div> 
    ); 
    }, // render 
}); // end of component 

var StepTwo = React.createClass({ 
    getInitialState: function() { 
    return {name: '', quantity: '', price: ''} 
    }, 
    _onChange(e) { 
    // set your state if needed 

    // call the parent function 
    this.props.onChange(
     e.target.id, 
     e.target.value 
    ) 
    }, 
    render: function() { 
    return (
     <div> 
     <div className="name-section"> 
     <div className="add"> 
      <ul> 
      <li> 
       <label>Ticket Name</label> 
       <input id="name" type="text" value={this.state.ticket_name} onChange={this._onChange.bind(this)} /> 
      </li> 
      <li> 
       <label>Quantity Available</label> 
       <input id="quantity" type="number" value={this.state.quantity} onChange={this._onChange.bind(this)} /> 
      </li> 
      <li> 
       <label>Price</label> 
       <input id="price" type="number" value={this.state.price} onChange={this._onChange.bind(this)} /> 
      </li> 
      </ul> 
     </div> 
     </div> 
     </div> 
    ); 
    } 

    EventCreation = React.createClass({ 
    getInitialState: function(){ 
     return {} 
    }, 
    _onChange(id, value) { 
     this.formData[id] = value; 
    }, 
    submit: function (e){ 
     var self 

     e.preventDefault() 
     self = this 

     // Submit form via jQuery/AJAX 
     $.ajax({ 
     type: 'POST', 
     url: '/some/url', 
     data: this.formData 
     }) 
     .done(function(data) { 
     self.clearForm() 
     }) 
     .fail(function(jqXhr) { 
     console.log('failed to register'); 
     }); 
    }, 
    render: function() { 
     return(
     <form> 
      <StepOne onChange={this.onChange.bind(this)}/> 
      <StepTwo onChange={this.onChange.bind(this)}/> 
      // submit button here 
     </form> 
    ); 
    } 
});