反应刷新默认值

Question

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

我有一个最小值为 1 的输入（此最小值会更改并由 javascript 强制执行）。

我不会用

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

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

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

这不是预期的行为。

所以，我正在使用

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

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

更新 dom

我可以手动触发反应以重置 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} />

我也可以事后做，但还必须附加一些数据属性属性

componentDidMount: ->

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

但都显得太乱了。

有没有办法触发反应以将默认值重新填充到所有输入或特定输入中？

Answer 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.......

反应刷新默认值

react refresh defaultValue

javascript

coffeescript

reactjs