React input defaultValue 不随状态更新

javascript reactjs forms coffeescript 2-way-object-databinding

2022-08-30 05:22:35

我正在尝试使用 react 创建一个简单的表单，但很难将数据正确绑定到表单的默认值。

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

当我打开我的页面时，文本输入字段应该用我的数据库中我的离开消息的文本填充。即“示例文本”
理想情况下，如果我的数据库中的 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>

我的控制台.log的 AwayMessage 显示以下内容：

AWAY_MESSAGE Object {}
AWAY_MESSAGE Object {id: 1, company_id: 1, text: "Sample Text", master_toggle: false}

答案 1

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

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

更新：由于这得到了赞成票，我不得不说，在内容加载时，您应该适当地拥有或道具，这样您就不会降低ux体验。disabledreadonly

是的，这很可能是一个黑客攻击，但它可以完成工作。;-)

答案 2

默认值仅适用于初始加载

如果要初始化输入，则应使用 defaultValue，但如果要使用 state 来更改值，则需要使用值。就个人而言，如果我只是初始化它，我喜欢只使用defaultValue，然后在提交时使用refs来获取值。在 react 文档、https://facebook.github.io/react/docs/forms.html 和 https://facebook.github.io/react/docs/working-with-the-browser.html 上有更多关于 ref 和 input 的信息。

以下是我如何重写您的输入：

awayMessageText = if this.state.awayMessage then this.state.awayMessage.text else ''
<input ref="text" onChange={this.onTextChange} placeholder="Placeholder Text" value={@state.awayMessageText} />

此外，您也不想像以前那样传递占位符文本，因为这实际上会将值设置为“占位符文本”。您仍然需要将空白值传递到输入中，因为未定义和 nil 实质上会将值转换为默认值。https://facebook.github.io/react/tips/controlled-input-null-value.html。

getInitialState 无法进行 api 调用

您需要在 getInitialState 运行后进行 api 调用。对于您的情况，我会在condictDidMount中执行此操作。https://facebook.github.io/react/tips/initial-ajax.html，请遵循此示例。

我还建议阅读 react 的组件生命周期。https://facebook.github.io/react/docs/component-specs.html。

通过修改和加载状态重写

就个人而言，我不喜欢在渲染中使用“加载”，而是喜欢在我的状态中使用“加载”，并在表单加载之前呈现一个字体真棒微调器，http://fortawesome.github.io/Font-Awesome/examples/。这是一个重写，向你展示我的意思。如果我搞砸了 cjsx 的蜱虫，那是因为我通常只使用这样的咖啡脚本。

window.Pages ||= {}

Pages.AwayMessages = React.createClass

  getInitialState: ->
    { loading: true, awayMessage: {} }

  componentDidMount: ->
    App.API.fetchAwayMessage (data) =>
      @setState awayMessage:data.away_message, loading: false

  onToggleCheckbox: (event)->
    @state.awayMessage.master_toggle = event.target.checked
    @setState(awayMessage: @state.awayMessage)

  onTextChange: (event) ->
    @state.awayMessage.text = event.target.value
    @setState(awayMessage: @state.awayMessage)

  onSubmit: (e) ->
    # Not sure what this is for. I'd be careful using globals like this
    window.a = @
    @submitAwayMessage(@state.awayMessage)

  submitAwayMessage: (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: ->
    if this.state.loading
      `<i className="fa fa-spinner fa-spin"></i>`
    else
    `<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 type="checkbox" onChange={this.onToggleCheckbox} checked={this.state.awayMessage.master_toggle} />
         </div>
         <div className="input-group">
           <label for="text">Text</label>
           <input ref="text" onChange={this.onTextChange} value={this.state.awayMessage.text} />
         </div>
       </div>
       <div className="footer">
         <button className="button2" onClick={this.close}>Close</button>
         <button className="button1" onClick={this.onSubmit}>Save</button>
       </div>
     </div>

这应该可以覆盖它。现在，这是使用状态和值的形式的一种方法。您也可以只使用 defaultValue 而不是 value，然后在提交时使用 refs 来获取值。如果你走这条路，我建议你有一个外壳组件（通常称为高阶组件）来获取数据，然后将其作为道具传递给表单。

总的来说，我建议你一直阅读 react 文档，并做一些教程。那里有很多博客，http://www.egghead.io 有一些很好的教程。我的网站上也有一些东西，http://www.openmindedinnovations.com。