2

当我在浏览器中键入时，我正在尝试更改反应控制输入的值。

我提供了一个代码示例。

如果前两个输入有值，则自动填充第三个输入。但是如果它们是空的，我怎么能让用户直接输入第三个字段的值呢？

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

1 回答 1

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>

于 2016-12-27T06:44:01.203 回答