堆栈内存溢出
  繁体   English   中英

反应输入默认值不随状态更新

[英]React input defaultValue doesn't update with state

 原文  2015-05-09 23:27:31  6   9    javascript/ forms/ reactjs/ coffeescript/ 2-way-object-databinding

问题描述

我正在尝试使用 react 创建一个简单的表单，但是在将数据正确绑定到表单的 defaultValue 时遇到了困难。

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

  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}

9 个解决方案

解决方案1
 71  2017-01-18 11:04:54

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

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

更新：由于这得到了赞成，我不得不说你应该在加载内容时正确地设置一个disabled或readonly道具，这样你就不会降低用户体验。

是的，这很可能是一次黑客攻击，但它完成了工作.. ;-)

解决方案2
 70  2015-05-10 07:48:03

defaultValue 仅用于初始加载

如果要初始化输入，则应使用 defaultValue，但如果要使用 state 更改值，则需要使用 value。 我个人喜欢只使用 defaultValue 如果我只是初始化它，然后在我提交时使用 refs 来获取值。 关于反应文档的参考和输入的更多信息， https://facebook.github.io/react/docs/forms.html和https://facebook.github.io/react/docs/working-with-the-浏览器.html 。

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

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

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

getInitialState 无法进行 api 调用

你需要在 getInitialState 运行后进行 api 调用。 对于您的情况，我会在 componentDidMount 中进行。 按照这个例子， https://facebook.github.io/react/tips/initial-ajax.html 。

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

用修改和加载状态重写

就我个人而言，我不喜欢在渲染中执行全部 if else then 逻辑，并且更喜欢在我的状态下使用“加载”并在表单加载之前渲染一个很棒的字体微调器， http://fortawesome.github.io/Font-真棒/例子/ 。 这是重写以向您展示我的意思。 如果我搞砸了 cjsx 的刻度，那是因为我通常只使用像这样的 coffeescript，.

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.openmindinnovations.com 。

解决方案3
 3  2015-05-09 23:38:26

也许不是最好的解决方案，但我会制作一个像下面这样的组件，这样我就可以在我的代码中的任何地方重用它。 我希望它已经在默认情况下做出反应。

<MagicInput type="text" binding={[this, 'awayMessage.text']} />

该组件可能如下所示：

window.MagicInput = React.createClass

  onChange: (e) ->
    state = @props.binding[0].state
    changeByArray state, @path(), e.target.value
    @props.binding[0].setState state

  path: ->
    @props.binding[1].split('.')
  getValue: ->
    value = @props.binding[0].state
    path = @path()
    i = 0
    while i < path.length
      value = value[path[i]]
      i++
    value

  render: ->
    type = if @props.type then @props.type else 'input'
    parent_state = @props.binding[0]
    `<input
      type={type}
      onChange={this.onChange}
      value={this.getValue()}
    />`

其中按数组更改是通过数组表示的路径访问哈希的函数

changeByArray = (hash, array, newValue, idx) ->
  idx = if _.isUndefined(idx) then 0 else idx
  if idx == array.length - 1
    hash[array[idx]] = newValue
  else
    changeByArray hash[array[idx]], array, newValue, ++idx

解决方案4
 2  2021-03-22 15:15:17

要强制 defaultValue 重新渲染，您需要做的就是更改输入本身的键值。 这是你如何做到的。

<input 
type="text" 
key={myDynamicKey} 
defaultValue={myDynamicDefaultValue} 
placeholder="It works"/>

解决方案5
 0  2017-08-16 17:01:30

我正在尝试使用react创建一个简单的表单，但是要使数据正确绑定到表单的defaultValue面临困难。

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

  1. 当我打开页面时，应在数据库中的“文本”输入字段中填写AwayMessage的文本。 那就是“样本文本”
  2. 理想情况下，如果数据库中的AwayMessage没有文本，则希望在“文本”输入字段中有一个占位符。

但是，现在，我发现每次刷新页面时，“文本”输入字段均为空白。 （尽管我在输入中键入的内容可以正确保存并持久保存。）我认为这是因为当AwayMessage为空对象时，输入文本字段的html会加载，而当awayMessage加载时，输入文本字段的html不会刷新。 另外，我无法为该字段指定默认值。

为了清楚起见，我删除了一些代码（即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}

解决方案6
 0  2018-05-30 10:00:30

给参数“placeHolder”赋值。 例如 ：-

 <input 
    type="text"
    placeHolder="Search product name."
    style={{border:'1px solid #c5c5c5', padding:font*0.005,cursor:'text'}}
    value={this.state.productSearchText}
    onChange={this.handleChangeProductSearchText}
    />

解决方案7
 0  2021-02-17 03:43:06

相关问题

在控件上设置defaulValue不会更新state 。

做反向工作完美：

  • 将state设置为默认值，控件 UI 会正确更新，就像给定了defaulValue 。

代码：

let defaultRole = "Owner";

const [role, setRole] = useState(defaultRole);

useEffect(() => {
    setMsg(role);
});

const handleChange = (event) => {
    setRole(event.target.value );
};

// ----

<TextField
    label="Enter Role"
    onChange={handleChange}
    autoFocus
    value={role}
/>

解决方案8
 0  2021-06-17 11:46:24

  1. 为您的默认值定义一个状态
  2. 用一个div和一个key道具包围你的输入
  3. 将键值设置为与输入的 defaultValue 相同的值。
  4. 在某处调用您在步骤 1 中定义的setDefaultValue以重新渲染您的组件

例子：

const [defaultValue, setDefaultValue] = useState(initialValue);

useEffect(() => {
    setDefaultValue(initialValue);
}, false)

return (
    <div key={defaultValue}>
        <input defaultValue={defaultValue} />
    </div>
)

解决方案9
 0  2021-06-22 17:50:49

使用value而不是defaultValue并使用onChange方法更改输入的值。

解决方案10
 0  2021-10-15 21:32:14

非常简单，使 defaultValue 和 key 相同：

<input defaultValue={myVal} key={myVal}/>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 用户更改输入时，React不会更新组件状态 无法使用defaultValue设置React状态 React Select defaultValue 已设置但未出现 React 组件不会在更新状态时更新 React Form onChange不会更新状态 反应 function 不更新 state 点击时React JS状态不会更新 React setState不更新状态 State 在 React 中不会立即更新 为什么 react 不更新“then” promise 中的 state？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM