React控制輸入不讓我改變輸入值

當我輸入瀏覽器時，React控制輸入不讓我改變輸入值。其餘部分，代碼將解釋所有。它的工作方式，如果前兩個輸入填充但如果前兩個輸入都是空的話，我怎樣才能使編輯在瀏覽器React控制輸入不讓我改變輸入值

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

來源

2016-12-27 Anurag Jain

在這裏，你有3個輸入，這是不是讓你這樣做呢？ –

這裏有什麼需要'jQuery'？你可以爲三個「輸入」提供狀態。這是安全的模式 –

我知道這種方式。但它不能解決我可編輯的瀏覽器DOM元素的問題。 –

如果我理解正確。您希望用戶編輯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>

來源

2016-12-27 06:44:01

React控制輸入不讓我改變輸入值

回答

相關問題