আমি প্রতিক্রিয়া সহ একটি সাধারণ ফর্ম তৈরি করার চেষ্টা করছি, তবে ফর্মটির ডিফল্টভ্যালুতে সঠিকভাবে বাঁধাই করা ডেটা হওয়াতে সমস্যা হচ্ছে।
আমি যে আচরণটি সন্ধান করছি তা হ'ল:
- আমি যখন আমার পৃষ্ঠাটি খুলি, পাঠ্য ইনপুট ক্ষেত্রটি আমার ডেটাবেজে আমার অ্যাওমেসেজের পাঠ্য দিয়ে পূরণ করা উচিত। এটি "নমুনা পাঠ্য"
- আদর্শভাবে আমি টেক্সট ইনপুট ক্ষেত্রে কোনও স্থানধারক পেতে চাই যদি আমার ডাটাবেসে অ্যাওমেসেজের কোনও পাঠ্য না থাকে।
তবে, এখনই, আমি খুঁজে পাচ্ছি যে প্রতিবার পৃষ্ঠাটি রিফ্রেশ করার সময় পাঠ্য ইনপুট ক্ষেত্রটি ফাঁকা। (যদিও আমি ইনপুটটিতে যা টাইপ করি তা সঠিকভাবে সংরক্ষণ করে এবং অবিচল থাকে I) আমি মনে করি কারণ এটি ইনপুট পাঠ্য ক্ষেত্রের এইচটিএমএল লোড হয় যখন অ্যাভমেসেজ একটি খালি অবজেক্ট থাকে তবে রিমুশ করে না যখন দূরেমেসেজ লোড হয়। এছাড়াও, আমি ক্ষেত্রের জন্য একটি ডিফল্ট মান নির্দিষ্ট করতে অক্ষম।
আমি স্বচ্ছতার জন্য কিছু কোড সরিয়েছি (যেমন: টগলচ্যাঞ্জ)
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>
অ্যাওম্যাসেজের জন্য আমার কনসোল.লগ নিম্নলিখিতটি দেখায়:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}