反応制御入力は入力値を変更させない

Question

反応制御入力は、ブラウザに入力するときに入力値を変更させません。残りの部分は、コードはすべて説明します。 最初の二つの入力が満たされたものの場合には最初の二つの入力は私が正しくあなたを理解していれば、私はブラウザ

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> 
    } 
}); 

Answer 1

で編集を有効にすることができますどのようにして空になっている場合、それは道を作業。 flatPriceを編集するには、上記の2つの値によって自動的に設定されます。input

注：削除jQuery依存完全

以下のスニペットは、あなたの必要性に対処します。ここで

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>