Unable to change the values of react controlled inputs

I'm trying to change values of react controlled inputs when I type in the browser.

I have provided a code example.

The third input is automatically filled in if the first two inputs have a value. But if they are empty how can I allow the user to directly input the value of the third field?

const PriceListRow = React.createClass({
    getInitialState(){
        return {
            flatPrice: "",
        }
    },
    setFlatPrice(a, b){
        "use strict";
        let self = this,
            prod = a * b;

        if ( !(_.isNumber(prod)) )
            self.setState({flatPrice: ""});
        else
            self.setState({flatPrice: prod});
       
    },
   render(){
       let self = this;
       return <div>
               <input type="number" name={"unitSize"} placeholder="1000 Sq. Ft." id={"unitSize"}
                      onBlur={ ()=> { self.setFlatPrice($("#bsp").val(), $("#unitSize").val()); }}
               />
               <input type="number"
                      name={"bsp"}
                      placeholder="4500" id={"bsp"}
                      onBlur={ ()=> { self.setFlatPrice($("#bsp").val(), $("#unitSize").val()); }}
               />
               <input type="text" name={"flatPrice"} placeholder="Size * BSP" id={"flatPrice"} value={self.state.flatPrice} />
       </div>
   }
});

Solution

If I understand you correctly. You want user to edit flatPrice even it is automatically set by above 2 input values.

Note: Removed jQuery dependency completely

The below snippet will address your need.

const PriceListRow = React.createClass({
    getInitialState(){
        return {
            flatPrice: "",
            unitSize: 0,
            bsp: 0
        }
    },
    onUnitSizeChange(e){
      this.setState({unitSize: e.target.value});
    },
    onBSPChange(e){
      this.setState({bsp: e.target.value});
    },
    onFlatPriceChange(e){
      this.setState({flatPrice: e.target.value});
    },
    setFlatPrice(){
        let prod = this.state.unitSize * this.state.bsp;
        this.setState({flatPrice: isNaN(prod) ? "" : prod});
    },
   render(){
       return <div>
               <input 
       type="number"
       name={"unitSize"}
       placeholder="1000 Sq. Ft."
       id={"unitSize"}
       value={this.state.unitSize}
       onChange={this.onUnitSizeChange}
       onBlur={this.setFlatPrice}
               />
               <input type="number"
                      name={"bsp"}
                      value={this.state.bsp}
                      placeholder="4500" id={"bsp"}
                      onChange={this.onBSPChange}
                      onBlur={this.setFlatPrice}
               />
               <input type="text"
               name="flatPrice"
               placeholder="Size * BSP"
               id={"flatPrice"}
               onChange={this.onFlatPriceChange}
               value={this.state.flatPrice}
               />
       </div>
   }
});

ReactDOM.render(<PriceListRow />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>