Question

当我在浏览器中输入时，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>
   }
});

Answer 1

如果我理解正确的话。您希望用户编辑flatPrice，即使它是由上述2 input值自动设置的。

注意：完全删除jQuery依赖

以下代码段将满足您的需求。

＆＃13;

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

＆＃13;

<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>

＆＃13;

React受控输入不允许我改变输入值

1 个答案: