javascript - 无法更改 react 控制输入的值

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 个输入 值自动设置的。

注意:完全删除了 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>