반응으로 간단한 양식을 만들려고하는데 데이터가 양식의 defaultValue에 제대로 바인딩되는 데 어려움이 있습니다.
내가 찾고있는 동작은 다음과 같습니다.
- 내 페이지를 열 때 텍스트 입력 필드가 데이터베이스의 AwayMessage 텍스트로 채워 져야합니다. 이것이 "샘플 텍스트"입니다.
- 데이터베이스의 AwayMessage에 텍스트가없는 경우 이상적으로는 텍스트 입력 필드에 자리 표시자를 갖고 싶습니다.
그러나 지금은 페이지를 새로 고칠 때마다 텍스트 입력 필드가 비어 있습니다. (입력에 입력 한 내용이 제대로 저장되고 지속되지만) AwayMessage가 빈 개체 일 때 입력 텍스트 필드의 html이로드되지만 awayMessage가로드 될 때 새로 고쳐지지 않기 때문이라고 생각합니다. 또한 필드의 기본값을 지정할 수 없습니다.
명확성을 위해 일부 코드를 제거했습니다 (예 : 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에 대한 내 console.log에 다음이 표시됩니다.
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}