Question

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

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

我无法使用

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

因为，当他们点击退格时，它默认为1。

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

这不是预期的行为。

所以，我正在使用

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

代替。这在幕后强制执行了正确的值，但它永远不会使用更正的最小/最大值更新dom。

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

我想在用户blur或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} />

我也可以在事后做，但也必须附加一些data-attr prop

componentDidMount: ->

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

但两者看起来都太乱了。

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

Answer 1

好吧，只有在本机onchange发生时才进行过滤，我写了一个mixin来听取原生的变化。

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>

因此，在视图中使用它现在相当容易。这有点复杂，所以如果有人知道一个更好的方式做本地改变，我全都耳朵...................哦等等..是有htmlOnChange ............

反应刷新defaultValue

1 个答案: