Ich versuche, ein einfaches Formular mit "Reagieren" zu erstellen, habe jedoch Schwierigkeiten, die Daten ordnungsgemäß an den Standardwert des Formulars zu binden.
Das Verhalten, das ich suche, ist folgendes:
- Wenn ich meine Seite öffne, sollte das Texteingabefeld mit dem Text meiner AwayMessage in meiner Datenbank ausgefüllt werden. Das ist "Beispieltext"
- Idealerweise möchte ich einen Platzhalter im Texteingabefeld haben, wenn die AwayMessage in meiner Datenbank keinen Text enthält.
Im Moment stelle ich jedoch fest, dass das Texteingabefeld bei jeder Aktualisierung der Seite leer ist. (Obwohl das, was ich in die Eingabe eingebe, ordnungsgemäß gespeichert wird und erhalten bleibt.) Ich denke, dies liegt daran, dass das HTML des Eingabetextfelds geladen wird, wenn die AwayMessage ein leeres Objekt ist, aber nicht aktualisiert wird, wenn die awayMessage geladen wird. Außerdem kann ich keinen Standardwert für das Feld angeben.
Ich habe einen Teil des Codes aus Gründen der Übersichtlichkeit entfernt (z. B. 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>
Mein console.log für AwayMessage zeigt Folgendes:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}