Управляемый входным сигналом не позволяет менять значение ввода

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>