反应刷新默认值答案

【问题标题】：react refresh defaultValue反应刷新默认值
【发布时间】：2015-03-11 17:20:59
【问题描述】：

编辑：解决这个问题的另一种方法是：有没有办法只过滤原生 onchange（模糊或输入键）上的输入

我有一个至少为 1 的输入（这个最小值会发生变化并由 javascript 强制执行）。

我不能用

<input value={@state.myfield} onChange={@customOnChange} />

因为，当他们按下退格键时，它默认为 1。

假设值为 9 用户点击退格键，以便他们可以将其更改为 8 现在输入是 18

这不是预期的行为。

所以，我正在使用

<input defaultValue={@state.myfield} onChange={@customOnChange} />

相反。这在幕后强制执行正确的值，但它永远不会使用更正的 min/max 更新 dom。

我可以手动触发reset defaultValue 并再次查找它们吗？

当用户blurs 或e.keyCode==13s 时，我想重新填充输入字段

我可以这样做，但它似乎超级混乱

if @respondToNativeChange
  elProp = value: @state.myfield
else
  elProp = defaultValue: @state.myfield
<input onChange={@customOnChange}
  onKeyDown={(e) => if e.keyCode is 13 then @respondToNativeChange = true; @forceUpdate()}
  onBlur={@respondToNativeChange=true;@forceUpdate()}
  {...elProp} />

事后我也可以这样做，但还必须附加一些 data-attr 属性

componentDidMount: ->

  $(@getDOMNode()).find('input').blur (e) => $(e.target).val @state[$(e.target).attr('data-attr')

但两者似乎都太乱了。

有没有办法触发响应以将 defaultValue 重新填充到所有输入或特定输入中？

【问题讨论】：

标签： javascript coffeescript reactjs

【解决方案1】：

好吧，为了只在原生 onchange 发生时进行过滤，我编写了一个 mixin 来监听原生 onchange。

myMixins.nativeOnChange = (method) ->

  unless _.isFunction method
    method = @[method]

  return nativeOnChange: (attribute, val, m) ->

    # Override CB
    if _.isString m
      m = @[m]
    else unless _.isFunction m
      m = method

    @_noc ?= {}

    ob = {
      onKeyDown: (e) =>
        if e.keyCode is 13
          @_noc[attribute] = true
          m?.call this, e, attribute, $(e.target).val()

      onBlur: (e) =>
        @_noc[attribute] = true
        m?.call this, e, attribute, $(e.target).val()
    }
    # Here, we detect if we should force dom to update by using `value`
    if @_noc[attribute]
      delete @_noc[attribute]
      ob.value = val
    else
      ob.defaultValue = val

    ob

然后去实现它

MyFactory = React.createFactory React.createClass

  mixins: [
    mixins.nativeOnChange ->
      @forceUpdate()
  ]

  onChange: (attribute, method) -> (e) =>

    val = $(e.target).val()
    if method then val = method val
    # You can limit it here and manipulate it
    # the changes won't get picked up until the nativeOnChange
    # forces value: to populate the dom
    @state[attribute] = val
    @forceUpdate() # is safe here, because defaultValue will be used
    # until nativeOnChange forces value

  render: ->
    <div>
      {props = @nativeOnChange 'min', @state.min}
      <input
        className='form-control input-control'
        name='min'
        type='number'
        step=1
        min=1
        max=10
        onChange={@onChange 'min', @parseInt}
        {...props}
      />
    </div>

所以现在在视图中使用它相当容易。这有点复杂，所以如果有人知道更好的方法来进行本地 onchanges，我会全神贯注........哦等等.. 有htmlOnChange。 ......

【讨论】：