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

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

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

我怀疑你是否需要 refs，事实上你应该尽可能避免使用它们。它们更多地用于为非 React API(例如 jQuery 或 TweenLite 或其他东西)提供原始 DOM 引用

此外，您在那里使用的字符串引用将 likely be removed in the future无论如何