反应控制的输入不允许我改变输入的值答案

【问题标题】：Unable to change the values of react controlled inputs反应控制的输入不允许我改变输入的值
【发布时间】：2017-05-11 10:15:24
【问题描述】：

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

【问题讨论】：

这里有 3 个输入，这不允许你这样做？
这里jQuery有什么需要？您可以为三个inputs 维护状态。这是安全模式
我知道。但它不能解决我的可编辑浏览器 dom 元素的问题。
这个可编辑的浏览器dom元素是什么意思？
当用户填写值时，我无法在 input#flatPrice 中编辑文本。检查问题。

标签： javascript reactjs virtual-dom

【解决方案1】：

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

注意：完全移除jQuery 依赖

下面的 sn-p 将满足您的需求。

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>

【讨论】：