反应输入默认值不随状态更新
[英] React input defaultValue doesn't update with state
本文介绍了反应输入默认值不随状态更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 React 创建一个简单的表单，但在将数据正确绑定到表单的 defaultValue 时遇到了困难.
我正在寻找的行为是这样的:
当我打开我的页面时，文本输入字段应填写我数据库中 AwayMessage 的文本.那就是示例文本" 理想情况下，如果我的数据库中的 AwayMessage 没有文本，我希望在文本输入字段中有一个占位符. 但是，现在我发现每次刷新页面时文本输入字段都是空白的.(尽管我在输入中输入的内容确实会正确保存并保持不变.)我认为这是因为当 AwayMessage 是空对象时，输入文本字段的 html 会加载，但在 awayMessage 加载时不会刷新.此外，我无法为该字段指定默认值.
为了清晰起见，我删除了一些代码(即 onToggleChange)
window.Pages ||= {}Pages.AwayMessages = React.createClassgetInitialState: ->App.API.fetchAwayMessage(数据)=>@setState awayMessage:data.away_message{离开消息:{}}onTextChange: (事件) ->console.log "VALUE", event.target.valueonSubmit: (e) ->窗口.a = @e.preventDefault()离开消息 = {}awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checkedconsole.log "文本值", @refs["text"].getDOMNode().valueawayMessage["text"]=@refs["text"].getDOMNode().value@离开消息(离开消息)离开消息:(离开消息)->console.log "我正在保存", awayMessageApp.API.saveAwayMessage awayMessage, (data) =>如果 data.status == 'ok'App.modal.closeModal()NotificationActions.notify("离开消息已保存.")@setState awayMessage:awayMessage渲染:->console.log "AWAY_MESSAGE", this.state.awayMessageawayMessageText = if this.state.awayMessage then this.state.awayMessage.text else "Placeholder Text"`<div className="离开消息"><div className="header"><h4>离开消息</h4> <div className="内容"><div className="输入组"><label for="master_toggle">开启?</label><input ref="master_toggle" type="checkbox" onChange={this.onToggleChange} defaultChecked={this.state.awayMessage.master_toggle}/>
<div className="输入组"><label for="text">Text</label><input ref="text" onChange={this.onTextChange} defaultValue={awayMessageText}/>
<div className="footer"><button className="button2" onClick={this.close}>关闭</button><button className="button1" onClick={this.onSubmit}>保存</button>
我的 AwayMessage 的 console.log 显示如下:
AWAY_MESSAGE 对象 {}AWAY_MESSAGE 对象 {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}
解决方案
另一种解决此问题的方法是更改输入的 key.
更新:由于这得到了投票，我不得不说你应该在加载内容时正确设置 disabled 或 readonly 道具，这样你就不会降低用户体验.
是的，这很可能是一次黑客攻击，但它完成了工作.. ;-)
I'm trying to create a simple form with react, but facing difficulty having the data properly bind to the defaultValue of the form.
The behavior I'm looking for is this:
When I open my page, the Text input field should be filled in with the text of my AwayMessage in my database. That is "Sample Text"
Ideally I want to have a placeholder in the Text input field if the AwayMessage in my database has no text.
However, right now, I'm finding that the Text input field is blank every time I refresh the page. (Though what I type into the input does save properly and persist.) I think this is because the input text field's html loads when the AwayMessage is an empty object, but doesn't refresh when the awayMessage loads. Also, I'm unable to specify a default value for the field.
I removed some of the code for clarity (i.e. 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>
my console.log for AwayMessage shows the following:
AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}
解决方案
Another way of fixing this is by changing the key of the input.
<input ref="text" key={this.state.awayMessage ? 'notLoadedYet' : 'loaded'} onChange={this.onTextChange} defaultValue={awayMessageText} />
Update:
Since this get upvotes, I will have to say that you should properly have a disabled or readonly prop while the content is loading, so you don't decrease the ux experience.
And yea, it is most likely a hack, but it gets the job done.. ;-)
这篇关于反应输入默认值不随状态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
