在 React 中链接两个输入字段

Posted 2023-03-03

【中文标题】在 React 中链接两个输入字段

【英文标题】：Linking two input fields in React

【发布时间】：2015-02-21 00:52:22

【问题描述】：

我有一个带有两个输入的表单，它充当某种计算器。想想像抵押贷款计算器这样的东西。用户需要能够在输入 a（整数或十进制）中输入一个值，并让它为输入 b 计算一些值。同样，用户必须能够在输入 b (int) 中输入一个值，并让它为输入 a 计算一个值。这些值应根据用户类型计算。

我可以进行计算，但是当我尝试执行以下任一操作时遇到了问题：清空该字段以重新开始； or 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>

【问题讨论】：

related question

你能提供一个fiddle 重现问题吗？

正在尝试，但我无法让组件呈现。 jsfiddle.net/uLpxfkxn

【参考方案1】：

知道了。问题出在我的计算方法中 - 如果文档或间隔字段为空白（然后将其他字段呈现为空白），我需要一些逻辑来捕捉。