Sto cercando di creare un modulo semplice con React, ma ho difficoltà a far associare correttamente i dati al valore predefinito del modulo.
Il comportamento che cerco è questo:
- Quando apro la mia pagina, il campo di immissione del testo dovrebbe essere riempito con il testo del mio AwayMessage nel mio database. Questo è "Testo di esempio"
- Idealmente, desidero avere un segnaposto nel campo di immissione del testo se AwayMessage nel mio database non ha testo.
Tuttavia, in questo momento, sto riscontrando che il campo di immissione del testo è vuoto ogni volta che aggiorno la pagina. (Anche se ciò che digito nell'input salva correttamente e persiste.) Penso che ciò sia dovuto al fatto che l'html del campo di testo di input viene caricato quando AwayMessage è un oggetto vuoto, ma non si aggiorna quando viene caricato awayMessage. Inoltre, non sono in grado di specificare un valore predefinito per il campo.
Ho rimosso parte del codice per chiarezza (ad esempio 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>il mio console.log per AwayMessage mostra quanto segue:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}