我有一个带有两个输入的表单,它充当某种计算器。想想像抵押计算器这样的东西。用户需要能够在输入 a 中输入一个值(整数或小数),并让它计算输入 b 的某个值。同样,用户必须能够向输入 b (int) 输入一个值,并让它计算输入 a 的值。这些值应根据用户类型进行计算。
我的计算工作正常,但是当我尝试以下任一操作时遇到问题:清空字段以重新开始;或 b:尝试在输入 a 中输入小数。
在第一种情况下,两个输入都不允许我删除最后一个字符。即使我突出显示整个值并按退格键,输入仍保持在原来的值。
在第二种情况下,小数点永远不会出现。如果我尝试输入 2.2
,则会得到 22
。
根据 React 文档,我使用 onChange
事件处理程序,它设置组件的状态,然后输入显示该状态。
代码示例在这里:
handleIntervalChange: ->
iVal = parseFloat @refs.confidenceInterval.getDOMNode().value
iVal = iVal/100
lVal = parseFloat @refs.confidenceLevel.getDOMNode().value
return false if _.isNaN ival
docCount = @calcDocsByCLevel lVal, iVal
docCount = null if _.isNaN(docCount) or docCount is Infinity
@setState
targetCLevel: lVal
targetCInterval: iVal
docCount: docCount
handleDocChange: ->
docCount = parseInt @refs.docCount.getDOMNode().value
return false if _.isNaN docCount
lVal = parseFloat @refs.confidenceLevel.getDOMNode().value
@setState
targetCLevel: lVal
targetCInterval: @calcIntervalByDocCount lVal, docCount
docCount: docCount
render: ->
<fieldset>
<div className='controls'>
<label htmlFor='confidence-interval'>
Confidence interval (%)
</label>
{<ValidatorTooltip errors={@state.errors['confidence-interval']}/> if @state.errors}
<input type='text' id='confidence-interval'
className={cIntervalClasses} ref='confidenceInterval'
value={@state.targetCInterval * 100}
onKeyUp={@handleKeyUp} onChange={@handleIntervalChange} />
</div>
<div className='controls'>
<label htmlFor='doc-count'>Number of documents</label>
{<ValidatorTooltip errors={@state.errors['doc-count']}/> if @state.errors}
<input type='text' id='doc-count' className={docClasses}
ref='docCount' onChange={@handleDocChange} onKeyUp={@handleKeyUp}
value={@state.docCount} />
</div>
</fieldset>
最佳答案
明白了。问题出在我的计算方法中 - 我需要一些逻辑来捕获文档或间隔字段是否为空(然后将其他字段呈现为空)。
关于coffeescript - 在 React 中链接两个输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27610889/