मैं प्रतिक्रिया के साथ एक सरल रूप बनाने की कोशिश कर रहा हूं, लेकिन डेटा को ठीक से फ़ॉर्म के डिफ़ॉल्टवैल्यू से बाँधने में कठिनाई का सामना करना पड़ रहा है।
जिस व्यवहार की मुझे तलाश है वह यह है:
- जब मैं अपना पृष्ठ खोलता हूं, तो पाठ इनपुट फ़ील्ड को मेरे डेटाबेस में मेरे AwayMessage के पाठ के साथ भरना चाहिए। वह "नमूना पाठ" है
- आदर्श रूप से मैं पाठ इनपुट क्षेत्र में एक प्लेसहोल्डर रखना चाहता हूं यदि मेरे डेटाबेस में एवमेज़ेज में कोई पाठ नहीं है।
हालाँकि, अभी, मुझे पता चल रहा है कि हर बार जब मैं पृष्ठ को रिफ्रेश करता हूं तो टेक्स्ट इनपुट फ़ील्ड रिक्त होता है। (हालांकि मैं इनपुट में जो टाइप करता हूं वह सही तरीके से सहेजता है और जारी रहता है।) मुझे लगता है कि यह इसलिए है क्योंकि इनपुट टेक्स्ट फील्ड का html लोड होता है जब एवमेज़ेज एक खाली ऑब्जेक्ट होता है, लेकिन जब एमेज़ेज लोड नहीं होता है तो ताज़ा नहीं होता है। साथ ही, मैं फ़ील्ड के लिए एक डिफ़ॉल्ट मान निर्दिष्ट करने में असमर्थ हूं।
मैंने स्पष्टता के लिए कुछ कोड हटा दिए (यानी onToggleChange)
window.Pages ||= {}
Pages.AwayMessages = React.createClass
getInitialState: ->
App.API.fetchAwayMessage (data) =>
@setState awayMessage:data.away_message
{awayMessage: {}}
onTextChange: (event) ->
console.log "VALUE", event.target.value
onSubmit: (e) ->
window.a = @
e.preventDefault()
awayMessage = {}
awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked
console.log "value of text", @refs["text"].getDOMNode().value
awayMessage["text"]=@refs["text"].getDOMNode().value
@awayMessage(awayMessage)
awayMessage: (awayMessage)->
console.log "I'm saving", awayMessage
App.API.saveAwayMessage awayMessage, (data) =>
if data.status == 'ok'
App.modal.closeModal()
notificationActions.notify("Away Message saved.")
@setState awayMessage:awayMessage
render: ->
console.log "AWAY_MESSAGE", this.state.awayMessage
awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else "Placeholder Text"
`<div className="away-messages">
<div className="header">
<h4>Away Messages</h4>
</div>
<div className="content">
<div className="input-group">
<label for="master_toggle">On?</label>
<input ref="master_toggle" type="checkbox" onChange={this.onToggleChange} defaultChecked={this.state.awayMessage.master_toggle} />
</div>
<div className="input-group">
<label for="text">Text</label>
<input ref="text" onChange={this.onTextChange} defaultValue={awayMessageText} />
</div>
</div>
<div className="footer">
<button className="button2" onClick={this.close}>Close</button>
<button className="button1" onClick={this.onSubmit}>Save</button>
</div>
</div>AwayMessage के लिए मेरा कंसोल .log निम्नलिखित दिखाता है:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}