javascript - react 刷新defaultValue

编辑：解决此问题的另一种方法是：是否有一种方法只能过滤本机onchange上的输入（模糊或Enter键）

我的输入至少为1（此最小更改并由javascript强制执行）。

我不能用

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

因为当它们碰到退格键时，它默认为1。

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

这不是预期的行为。

所以，我正在使用

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

代替。这会在幕后强制使用正确的值，但不会使用已修正的最小/最大值来更新dom。

我可以手动触发反应来重置defaultValue并再次查找它们吗？

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

我可以这样做，但看起来超级混乱

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')

但两者似乎都太混乱了。

有没有一种方法可以触发反应以将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>

因此，现在在视图中使用它非常容易。这有点复杂，所以如果有人知道更好的方法来进行本机onchanges，我就会.....哦，等等..是否有htmlOnChange。 ......

关于javascript - react 刷新defaultValue，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27927461/