Tôi đang cố gắng tạo một biểu mẫu đơn giản với phản ứng, nhưng gặp khó khăn khi dữ liệu liên kết đúng với Giá trị mặc định của biểu mẫu.
Hành vi tôi đang tìm kiếm là:
- Khi tôi mở trang của mình, trường nhập Văn bản sẽ được điền bằng văn bản của AwayMessage trong cơ sở dữ liệu của tôi. Đó là "Văn bản mẫu"
- Lý tưởng nhất là tôi muốn có một trình giữ chỗ trong trường nhập Văn bản nếu AwayMessage trong cơ sở dữ liệu của tôi không có văn bản.
Tuy nhiên, hiện tại, tôi thấy rằng trường nhập Văn bản trống mỗi khi tôi làm mới trang. (Mặc dù những gì tôi nhập vào dữ liệu đầu vào không lưu đúng cách và vẫn tồn tại.) Tôi nghĩ điều này là do html của trường văn bản đầu vào tải khi AwayMessage là một đối tượng trống, nhưng không làm mới khi awayMessage tải. Ngoài ra, tôi không thể chỉ định giá trị mặc định cho trường.
Tôi đã xóa một số mã để rõ ràng (tức là 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>
console.log của tôi cho AwayMessage hiển thị như sau:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}