我有一个带有两个输入的表单，它可以作为各种计算器 . 想想像抵押贷款计算器这样的东西 . 用户需要能够将值输入到输入a（int或decimal）中，并让它为输入b计算一些值 . 同样，用户必须能够将值输入到输入b（int）中，并让它计算输入a的值 . 值应按用户类型计算 .
我有计算工作，但当我尝试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>
1 回答
得到它了 . 问题出在我的计算方法中 - 我需要一些逻辑来捕获文档或间隔字段是否为空（然后将其他字段呈现为空白） .