不能添加一個ref到一個將被setState重新加載的對象

Question

我只是想添加一個ref到對象，因爲我必須清除它的值。 我寫這樣的：

this.code = (
    <div className="form-group"> 
      <label className="form-label" htmlFor="target">Target</label> 
      <input className="input" onChange={this.handleChange.bind(this)} ref="textbox" id="target" type="text" placeholder="Target" /> 
     </div> 
); 
this.setState(this.state); 

，得到了如下錯誤：

Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded 

所有我想要做的是簡單的：如果我點擊一個按鈕，現有的形式將被清除，和其他一些形式的會出現。爲此，我嘗試使用setState方法。這是一個錯誤的方法？

Answer 1

只有ReactOwner可以擁有參考。你可能會增加一個裁判，這不是一個組件的render方法， 內部創建一個 組件或你有反應裝

按照陣營文件的多個副本：

This usually means one of two things: 

1. You are trying to add a ref to an element that is being created outside of a component's render() function. 
2. You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured NPM dependency) 

你的情況下似乎是第一個，你試圖在渲染函數之外創建文檔對象。

的解決辦法是有一個從渲染函數返回一個文檔對象

renderInput =() => { 
    return (
     <div className="form-group"> 
      <label className="form-label" htmlFor="target">Target</label> 
      <input className="input" onChange={this.handleChange.bind(this)} ref={(ref) => this.textbox = ref} id="target" type="text" placeholder="Target" /> 
     </div> 
    ) 
} 
render() { 
    return (
     <div> 
      {this.renderInputForm()} 
     </div> 
    ) 
} 

附：調用的函數React建議使用回調方法而不是字符串參考。檢查這個答案：

In React .js: is there any function similar like document.getElementById() in javascript ? how to select certain object?

另外在Invalid Refs情況：

只有ReactOwner可以有裁判。這通常意味着您正在嘗試 以將ref添加到沒有所有者的組件（即， 未在其他組件的render方法內創建）。嘗試使用 將此組件放置在 將容納參考的新頂級組件內。