javascript - react 输入默认值不随状态更新

Question

我正在尝试使用 React 创建一个简单的表单，但在将数据正确绑定(bind)到表单的默认值时遇到困难。

我正在寻找的行为是这样的:

1. 当我打开我的页面时，文本输入字段应该填入我数据库中的 AwayMessage 文本。那就是“示例文本”
2. 理想情况下，如果我的数据库中的 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}

Answer 1

解决此问题的另一种方法是更改​​输入的 key。

<input ref="text" key={this.state.awayMessage ? 'notLoadedYet' : 'loaded'} onChange={this.onTextChange} defaultValue={awayMessageText} />

更新:由于这得到了支持，我不得不说你应该在内容加载时正确地使用 disabled 或 readonly 属性，这样你就不会降低用户体验。

是的，这很可能是一个 hack，但它完成了工作..;-)