Linking two input fields in React

I have a two input form that acts like a calculator. Think of something like a mortgage calculator. The user should be able to enter a value into input a (int or decimal) and count some value to input b. Likewise, the user should be able to enter a value into the b (int) input and calculate the value for the a input. Values ​​should be calculated per user type.

The calculation works for me, but I have problems when I try to either: start the field; or b: try to enter a decimal fraction into input a.

In the first case, no input will allow me to delete the last character. Even if I highlighted the entire value and hit backspace, the input remains where the value was.

In the second case, the decimal never takes. If I try to enter 2.2

, I get 22

.

In the React documentation, I use an event handler onChange

that sets the state of my component and then the inputs display that state.

Sample code here:

  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>