在React上设置默认的ref值？

Question

所以我的代码看起来像这样：

stockconfirmbuy: function(){
  var totalbuyval = this.refs.stockpriceref.innerHTML * this.refs.stockdnum.value;    
    return (<div>
         <input type="number" value="1" ref="stockdnum" /> 
         <p>Your Total:</p>
         <p>${totalbuyval}</p>              
</div>);
},  

我的问题是我收到Cannot read property 'value' of undefined错误。这是指我的input type="number"。

但是，我一直试图给我的输入一个默认值，这样就不会发生这种情况。我给它一个默认的value=1，但这似乎不满足ref。

所以我想知道我需要做什么来设置默认的ref值。或者我应该使用州？

Answer 1

你绝对应该在这里使用状态，为stockdnum和stockpriceref设置getInitialState()的默认状态值

然后，您可以从州渲染值，例如<input type="number" value={this.state.stockdnum}/>。请注意，除非您设置onChange更新状态，否则这将导致输入为只读。 Read more about this here

我怀疑你根本不需要参考，事实上你应该尽可能避免它们。它们更多的是为非React API提供原始DOM引用（例如jQuery或TweenLite等）

此外，在您使用字符串引用时，无论如何都会likely be removed in the future

Answer 2

  

我一直试图给我的输入一个默认值，这样做   不会发生

你可以这样做：

var defaultRef = typeof this.refs.stockdnum.value !== "undefined" ? this.refs.stockdnum.value : defaultValue;
var totalbuyval = this.refs.stockpriceref.innerHTML * defaultRef;

Answer 3

我通过在componentDidMount中分配初始值来解决它。我通过道具获得了初始价值。看看。