Javascript 反应刷新默认值

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

我有一个最小值为1的输入（这个最小值是变化的，由javascript强制执行）

我不能用

因为，当他们点击backspace时，默认为1

假设值为9 用户点击backspace，以便将其更改为8 现在输入是18

这不是故意的行为

所以，我正在使用

相反。这在幕后强制执行了正确的值，但它从不使用正确的最小值/最大值更新dom

我是否可以手动触发Resact以重置

defaultValue

并再次查找它们？

当用户

blur

s或

e.keyCode==13

s时，我想重新填充输入字段

我可以这样做，但看起来太乱了

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} />

但两者似乎都太乱了

---

有没有一种方法可以触发react将defaultValue重新填充到所有输入或特定输入中？

好吧，为了只在本地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>

MyFactory=React.createFactory React.createClass
混合：[
mixins.nativeOnChange->
@forceUpdate（）
]
onChange：（属性、方法）->（e）=>
val=$（e.target）.val（）
如果为方法，则val=方法val
#你可以把它限制在这里，然后操纵它
#在nativeOnChange之前，这些更改不会被接受
#强制值：填充dom
@状态[属性]=val
@forceUpdate（）#在这里是安全的，因为将使用defaultValue
#直到nativeOnChange强制值
渲染：->
{props=@nativeOnChange'min'，@state.min}

因此，在视图中使用它现在相当容易。这有点复杂，所以如果有人知道一种更好的方法来进行本地更改，我洗耳恭听。。。。。。。。。。。。。。。。。。。哦，等等。。是否有

htmlOnChange

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>