Próbuję utworzyć prosty formularz z funkcją reagowania, ale mam trudności z prawidłowym powiązaniem danych z wartością domyślną formularza.
Zachowanie, którego szukam, jest następujące:
- Kiedy otwieram moją stronę, pole tekstowe powinno być wypełnione tekstem mojej AwayMessage w mojej bazie danych. To jest „Przykładowy tekst”
- Idealnie byłoby, gdyby w polu wprowadzania tekstu znajdował się symbol zastępczy, jeśli komunikat AwayMessage w mojej bazie danych nie zawiera tekstu.
Jednak w tej chwili stwierdzam, że pole tekstowe jest puste za każdym razem, gdy odświeżam stronę. (Chociaż to, co wpisuję w danych wejściowych, jest zapisywane prawidłowo i utrwalane). Myślę, że dzieje się tak, ponieważ kod HTML pola wejściowego jest ładowany, gdy AwayMessage jest pustym obiektem, ale nie odświeża się, gdy ładuje się awayMessage. Nie mogę również określić wartości domyślnej dla tego pola.
Usunąłem część kodu dla przejrzystości (np. 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>
Mój console.log dla AwayMessage zawiera następujące informacje:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}